How to set the default culture "ar" in (API, Identity Server, Angular) with default layout (RTL) and I support multi-languages like "en" with layout (LTR)? #2461

8 Answer(s)

• 

  0

  maliming created 2 years ago

  Support Team Fullstack Developer

  hi

  You can control it in language management page.

  

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  I Make a new application, without any update, and I run to the application and change setting as the above section, but still not working. I open chrome new incognito windows

  

  

  I think not working because "AcceptLanguageHeaderRequestCultureProvider" I made some changes to override "AcceptLanguageHeaderRequestCultureProvider", The API and Identity Server worked fine in the first load, but angular UI has not worked fine

  

  Identity Server first load

  angular UI first load

  after refreshing with f5 only, everything ok

  

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  Kindly any update

  Save Cancel
• 

  0

  bunyamin created 2 years ago

  Hello,

  This seems to be a bug. I've created an issue to fix this. It'll be fixed in the next patch release.

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  I want to workaround until the ABP team fix this issue

  Save Cancel
• 

  0

  bunyamin created 2 years ago

  For a temporary solution, you can follow these steps:

  • Create a service next to the app.module.ts. Let's call it my-document-dir.handler.ts
  • Copy and paste the code below.
  • Then, you need to replace the existing service with yours. To do that, import it in the providers array of app.module.ts

  import { getLocaleDirection, LocalizationService } from '@abp/ng.core';
  import { LocaleDirection } from '@abp/ng.theme.shared';
  import { Injectable, Injector } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Injectable()
  export class MyDocumentDirHandlerService {
    private dir = new BehaviorSubject<LocaleDirection>('ltr');
    dir$ = this.dir.asObservable();
    constructor(protected injector: Injector) {
      this.listenToLanguageChanges();
    }
  
    private listenToLanguageChanges() {
      const l10n = this.injector.get(LocalizationService);
      l10n.currentLang$.pipe(map(locale => getLocaleDirection(locale))).subscribe(dir => {
        this.dir.next(dir);
        this.setBodyDir(dir);
      });
    }
  
    private setBodyDir(dir: LocaleDirection) {
      document.body.dir = dir;
      document.dir = dir;
    }
  }
  

  // ...
  import { DocumentDirHandlerService, ThemeSharedModule } from '@abp/ng.theme.shared';
  import { MyDocumentDirHandlerService } from './my-document-dir.handler';
  
  @NgModule({
    // ...
    imports: [
      ...
    ],
    providers: [
      // ...
      { provide: DocumentDirHandlerService, useClass: MyDocumentDirHandlerService },
    ],
    bootstrap: [AppComponent],
  })
  export class AppModule {}
  

  Save Cancel
• 

  0

  mostafa_ibrahem22@hotmail.com created 2 years ago

  l10n.currentLang$ not exists

  

  I made some changes, please tell me if this code is ok or not, I only support two languages "ar", and "en" only

  

  Save Cancel
• 

  0

  bunyamin created 2 years ago

  Yeah, sorry I just added currentLang$ and it doesn't exist in your code. You need a stream of the "currentLang" because when the user switches between ar and en, the direction should be updated. Here is how you can do it with the existing APIs:

  What you need is SessionStateService::getLanguage$() method.

  import { getLocaleDirection, SessionStateService } from '@abp/ng.core';
  import { LocaleDirection } from '@abp/ng.theme.shared';
  import { Injectable, Injector } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  @Injectable()
  export class MyDocumentDirHandlerService {
    private dir = new BehaviorSubject<LocaleDirection>('ltr');
    dir$ = this.dir.asObservable();
    constructor(protected injector: Injector) {
      this.listenToLanguageChanges();
    }
  
    private listenToLanguageChanges() {
      const sessionState = this.injector.get(SessionStateService);
      sessionState.getLanguage$().pipe(map(locale => getLocaleDirection(locale))).subscribe(dir => {
        this.dir.next(dir);
        this.setBodyDir(dir);
      });
    }
  
    private setBodyDir(dir: LocaleDirection) {
      document.body.dir = dir;
      document.dir = dir;
    }
  }
  

  Save Cancel