Ngx-admin: multi language support

[skarahoda]

Hi!

Firstly, I want to thank you for your great project. I am using blur admin and we are thinking to migrate our project to ngx admin. As first step we need to add multilanguage support to your project. If you are intrested to add multilanguage support to your project, I can help you or I can fork your project, add multilanguage support then we can merge to your project.

[rbetancor]

Hi @skarahoda , I think the best way would be to just fork and do a PR adding the new feature.

I've doing some tests with ngx-translate as a way to add multilanguaje support to ngx-admin

[nnixaa]

Hey @skarahoda, I guess this may be a good idea, we just need to specify the requirements to this task so that we are on the same page before you start digging in. Could you please let us know you plan on this and the library you are going to use? Thanks.

[Newan]

now the nebular components have no translate support but you can 'fake' it:

1. Install ngx-tranlate. ngx-admin has no ng 5.0 support so you must install 8.0 from ngx-tranlate
   npm install @ngx-translate/[email protected]. --save
   npm install @ngx-translate/http-loader --save

2. create an i18n folder under assets and one file for your language as example en.json

{
  "dashboard": {
    "light": "Light"
  }
}

1. add modules an http loader from the ngx-tranlate docu in your app.module.ts file

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient],
      },
    }),
    AppRoutingModule,
    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }, TranslateService
  ],
})

1. configurate youtr language settings under app.component.t, like:

  constructor(private analytics: AnalyticsService, private translate: TranslateService) {

    // init language
    translate.addLangs(['en', 'de']);
    translate.setDefaultLang('de'); // Fallback
  }

1. add TranslateModule in your sub-module imports
2. add your tranlation to an element, for example:
   <ngx-status-card title="{{ 'dashboard.light' | translate }}" type="primary" >

I hope this helps and I hope of official support in nebular!

[el7lme]

Hi @Newan,
It good implementation of translate. but I stuck in translation the menu. is there any solution to do that?

Thanks a lot @Newan i have used your guide in the following issue

https://github.com/akveo/nebular/issues/68

[hkkhchan]

Hi @Newan,
It good implementation of translate. but I stuck in translation the menu. is there any solution to do that?

Thanks a lot @Newan i have used your guide in the following issue

akveo/nebular#68

For the menu item's translation. you can see that the menu items was store in pages-menu.ts
so you can use ngx translate to replace the wordings with lang change event.