Localization

Why use ngx-translate and not i18n?

We use ngx-translate because the i18n from Angular core is yet to support dynamic translation (without reloading the page) which is a must for our project. However it is suppose to land in Angular 6.x (~March 2018) as the ngx-translate author wrote here, he is also 1 of the guy working on implementing it in the Angular core. When the i18n Service supports dynamic translation, I will revisit this implementation but in the mean time we will stick with ngx-translate.

Minimal installation (when only using 1 locale like English)

If you are only using 1 locale, you still need to import/configure ngx-translate to use Angular-Slickgrid

Since ngx-translate is now a dependency of Angular-Slickgrid, you will need to add ngx-translate to your bundle and import/configure it in your App Module. The minimum is the following setup

Install NPM package

npm install @ngx-translate/core

App Module

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { AngularSlickgridModule } from 'angular-slickgrid';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    TranslateModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Regular Installation

NPM

You need to make sure that you have @ngx-translate/core installed. Then optionally, you will need a loader, the most recommended one is @ngx-translate/http-loader. For more installation and usage information, you can visit the official ngx-translate site

npm install @ngx-translate/core @ngx-translate/http-loader 

## OR with yarn
yarn add @ngx-translate/core @ngx-translate/http-loader 

App initializer (optional)

If you use the recommended http-loader, you might encounter some async problem with Angular-Slickgrid. The reason is simple, SlickGrid is a jQuery lib and it's Formatters and everything else needs to return data instantly (not asynchronously) and Angular-Slickgrid uses the .instant(key) function and the data must be loaded prior to performing the .instant(). So to avoid such async problem, it is recommended to use an App Initializer as documented here, this will make sure that you will start loading the page once all the translation data is ready.

App Module

As mentioned in previous paragraph, you can choose multiple type of loader. However, if you choose the recommended http-loader and the App Initializer describe earlier, then your App module should have something along these lines

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Injector, APP_INITIALIZER, NgModule } from '@angular/core';
import { LOCATION_INITIALIZED } from '@angular/common';

// AoT requires an exported function for factories
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

// use an Initializer Factory as describe here: https://github.com/ngx-translate/core/issues/517#issuecomment-299637956
export function appInitializerFactory(translate: TranslateService, injector: Injector) {
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      const langToSet = 'en';
      translate.setDefaultLang('en');
      translate.use(langToSet).subscribe(() => {
        // console.info(`Successfully initialized '${langToSet}' language.'`);
      }, err => {
        console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
    });
  });
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService, Injector],
      multi: true
    },
    GridOdataService,
    ResizerService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }