Listening to language change from front end in angular #10547

2 Answer(s)

• 

  0

  AI-Bot created 9 hours ago

  Support Team ABP Agent

  • Listen to language changes in ABP Angular (v10.1) by subscribing to the language value stored in SessionStateService. ABP’s theme language switch uses SessionStateService to get/set the current language, so observing that state is the correct “language changed” signal.

  import { Injectable } from '@angular/core';
    import { SessionStateService } from '@abp/ng.core';
    import { distinctUntilChanged, map } from 'rxjs/operators';
  
    @Injectable({ providedIn: 'root' })
    export class LanguageChangeListenerService {
      constructor(private sessionState: SessionStateService) {}
  
      // Emits whenever language changes (e.g. user picks a language from theme UI)
      language$ = this.sessionState.getLanguage$().pipe(
        distinctUntilChanged()
      );
  
      // Example: call some action on change
      init() {
        this.language$.subscribe(lang => {
          // do your action here
          // e.g., refresh data, rebuild menus, change moment locale, etc.
          console.log('Language changed:', lang);
        });
      }
    }
  

  Then call LanguageChangeListenerService.init() once at app startup (e.g., in AppComponent or an APP_INITIALIZER).

  • If you need to know when GET /api/abp/application-configuration?includeLocalizationResources=false is called:
    • In ABP Angular, this is part of the application configuration loading pipeline (startup / refresh). The most robust way to detect that call is to add an Angular HttpInterceptor and watch for that URL.

  import { Injectable } from '@angular/core';
    import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
    import { Observable, tap } from 'rxjs';
  
    @Injectable()
    export class AppConfigCallInterceptor implements HttpInterceptor {
      intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return next.handle(req).pipe(
          tap(() => {
            if (req.url.includes('/api/abp/application-configuration')) {
              // You can also check req.params for includeLocalizationResources
              console.log('ABP application-configuration called:', req.urlWithParams);
            }
          })
        );
      }
    }
  

  Register it in your module providers:

  import { HTTP_INTERCEPTORS } from '@angular/common/http';
  
    providers: [
      { provide: HTTP_INTERCEPTORS, useClass: AppConfigCallInterceptor, multi: true },
    ]
  

  • What service is responsible for calling that API?

    • I could not verify the exact Angular service/class name from the available indexed GitHub sources in this environment (the code search did not return results for that endpoint string). So I can’t definitively name the service for v10.1 here.
    • Practically, you don’t need the internal service name: subscribing to SessionStateService.getLanguage$() is the supported way to react to language changes, and an HttpInterceptor is the reliable way to detect calls to /api/abp/application-configuration.

  • https://abp.io/docs/10.1/framework/ui/angular/theming

  ---

  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.

  Save Cancel
• 

  0

  maliming created 34 minutes ago

  Support Team Fullstack Developer

  You can listen for language changes in ABP Angular using the built-in services from @abp/ng.core. Here are the recommended approaches:

  Option 1: LocalizationService.languageChange$ (Recommended)

  This is the best option because it fires after the language switch is fully complete (localization resources refreshed, locale registered):

  import { LocalizationService } from '@abp/ng.core';
  import { Subject } from 'rxjs';
  import { takeUntil } from 'rxjs/operators';
  
  @Component({ ... })
  export class MyComponent implements OnInit, OnDestroy {
    private destroy$ = new Subject<void>();
  
    constructor(private localizationService: LocalizationService) {}
  
    ngOnInit() {
      this.localizationService.languageChange$
        .pipe(takeUntil(this.destroy$))
        .subscribe(newLanguage => {
          console.log('Language changed to:', newLanguage);
          // your custom logic here
        });
    }
  
    ngOnDestroy() {
      this.destroy$.next();
      this.destroy$.complete();
    }
  }
  

  Option 2: SessionStateService.onLanguageChange$()

  This fires immediately when the language starts changing (localization resources may not be refreshed yet):

  import { SessionStateService } from '@abp/ng.core';
  
  constructor(private sessionState: SessionStateService) {}
  
  ngOnInit() {
    this.sessionState.onLanguageChange$()
      .pipe(takeUntil(this.destroy$))
      .subscribe(lang => {
        console.log('Language is changing to:', lang);
      });
  }
  

  Option 3: SessionStateService.getLanguage$()

  Returns an Observable of the current language including the initial value:

  import { distinctUntilChanged } from 'rxjs/operators';
  
  this.sessionState.getLanguage$()
    .pipe(distinctUntilChanged(), takeUntil(this.destroy$))
    .subscribe(lang => {
      console.log('Current language:', lang);
    });
  

  About the API call

  The GET /api/abp/application-configuration call is made by AbpApplicationConfigurationService, and ConfigStateService.refreshLocalization() is responsible for refreshing localization resources when the language changes. The internal flow is:

  1. SessionStateService.setLanguage() → updates the store state
  2. LocalizationService.listenToSetLanguage() → detects the change
  3. ConfigStateService.refreshLocalization(lang) → calls the API to refresh localization
  4. LocalizationService.languageChange$ → emits the event after everything is done

  You don't need to intercept the API call directly — just subscribe to the Observables above to react to language changes.

  Save Cancel