Open Closed

Custom Language selector #9766


User avatar
0
alina@iwell.nl created

Hello,

I replaced LeptonX Language switcher with a custom one.

typescript:

import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
import { Component, inject } from '@angular/core';
import { map, Observable } from 'rxjs';

@Component({
    selector: 'app-language-selector',
    templateUrl: './language-selector.component.html',
    styleUrls: ['./language-selector.component.scss'],
    standalone: false,
})
export class LanguageSelectorComponent {
    private configState = inject(ConfigStateService);
    private sessionState = inject(SessionStateService);

    languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');

    get selectedLanguageName$(): Observable<string> {
        return this.languages$.pipe(
            map((languages) => {
                const selectedLang = languages.find((lang) => lang.cultureName === this.selectedLangCulture());
                return selectedLang ? selectedLang.displayName : '';
            }),
        );
    }

    get selectedLanguageShortName$(): Observable<string> {
        return this.languages$.pipe(
            map((languages) => {
                const selectedLang = languages.find((lang) => lang.cultureName === this.selectedLangCulture());
                return selectedLang ? selectedLang.twoLetterISOLanguageName : '';
            }),
        );
    }

    selectedLangCulture(): string {
        return this.sessionState.getLanguage();
    }

    onChangeLang(cultureName: string) {
        this.sessionState.setLanguage(cultureName);
    }
}

template:

<div class="language-selector">
    <div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
        <a
            ngbDropdownToggle
            autoClose="outside"
            class="nav-link"
            href="javascript:void(0)"
            role="button"
            id="dropdownMenuLink"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false">
            <span class="language-short">{{ selectedLanguageShortName$ | async }}</span>
            <div class="language-long">
                <i class="ri-global-line"></i>
                <span>
                    {{ selectedLanguageName$ | async }}
                </span>
            </div>
        </a>

        <div
            class="dropdown-menu dropdown-menu-right border-0 shadow-lg"
            aria-labelledby="dropdownMenuLink"
            [class.d-block]="languageDropdown.isOpen()">
            <a
                *ngFor="let lang of languages$ | async"
                href="javascript:void(0)"
                class="dropdown-item"
                [class.active]="lang.cultureName === selectedLangCulture()"
                (click)="onChangeLang(lang.cultureName)">
                {{ lang?.displayName }}
            </a>
        </div>
    </div>
</div>

Now after switching the language I get an error and the page is not being translated: Though after refreshing the page, the selected language is allplied.

What shall I do to make it work?


8 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent
    • The error you are seeing (Cannot read properties of undefined (reading 'then') at _LocalizationService.registerLocale) occurs because the ABP Angular localization system expects a full page reload when changing the language. The built-in language switcher in LeptonX and ABP Angular triggers a hard reload after setting the language, ensuring all localization resources are reloaded and registered.

    • In your custom onChangeLang method, you are only calling this.sessionState.setLanguage(cultureName); which updates the language in the session, but does not reload the page. As a result, the localization service tries to register the new locale without the necessary resources, causing the error.

    • To fix this, after setting the language, you should force a full page reload:

    onChangeLang(cultureName: string) {
          this.sessionState.setLanguage(cultureName);
          location.reload();
      }
    

    This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  • User Avatar
    0
    alina@iwell.nl created

    I've managed to get rid of the error by adding the

    provideAbpCore(
                withOptions({
                    environment,
                    registerLocaleFn: registerLocale(
                        {
                            cultureNameLocaleFileMap: { 'nl-NL': 'nl' },
                            errorHandlerFn: ({ resolve, reject, locale, error }) => {
                                // the error can be handled here
                            },
                        },
                    ),
                }),
            ),
    

    but still to see the new language applied I have to refresh the page

    window.location.reload();
    

    is it possible to reload page data without reloading the whole page by using abp methods?

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hello, Thank you for providing detailed information and related updates regarding your problem. I have simply replaced the Toolbar component just to demonstrate the issue on my side. However, I was unable to produce it.

    May I ask how exactly you have used the component on your side? Thank you for your cooperation.

  • User Avatar
    0
    alina@iwell.nl created

    Hi sumeyye.kurtulus, Thank you for your response.

    We don't use LeptonX or Lepton theme. Though the language is applied only when you force refreshing the page by

    window.location.reload();
    

    In LeptonX the language is applied without refreshing the page completely. How can I apply the same behaviour without using LeptonX?

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Thank you for sharing the additional details. Unfortunately, I am unable to determine how the theme has been integrated into your project based on the information provided.

    To help us investigate further, could you please send a minimal, reproducible example?
    You may send it directly to me at sumeyye.kurtulus@volosoft.com.

    In the meantime, you can also review the source code for the LeptonX theme.
    The source can be obtained using Suite, as explained here: ABP Suite Source Code Documentation.

    Alternatively, you can add the theme package with source code under your Angular directory using the following command:

    abp add-package @volosoft/abp.ng.theme.lepton-x --with-source-code
    

    Please let us know if you need any further assistance. We will be glad to help.

    Thank you for your cooperation.

  • User Avatar
    0
    alina@iwell.nl created

    Thank you for the response.

    To simplify the question, is it possible to reload the page in ABP Angular without using the code

    window.location.reload();
    

    ?

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hello again, You can use the reloadPage declared in AbpWindowService https://github.com/abpframework/abp/blob/93da49c17aa61883733f0abcff19ba45b6c3d633/npm/ng-packs/packages/core/src/lib/services/window.service.ts#L18 to reload the page. However, it does the same thing at the end.

  • User Avatar
    0
    alina@iwell.nl created

    Thank you for trying to help. Closing the ticket.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 05, 2025, 09:28