How to use ngx-translate in Angular Application

npm i @ngx-translate/core --save

npm i @ngx-translate/http-loader --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {GridAllModule} from '@syncfusion/ej2-angular-grids';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    GridAllModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

en-US.json
{
    "TITLE": "The language of this application is English(US)",
    "GRID": {
        "DISPLAYVALUE": "Display value",
        "NUMBERVALUE": "Number value",
        "DATEVALUE": "Date value"
    },
    "SYNCFUSION": {
        "grid": {
            "EmptyRecord": "No records to display",
            "GroupDropArea": "Drag a column header here to group its column",
            "UnGroup": "Click here to ungroup",
            "Item": "item",
            "Items": "items"
        },
        "pager":{
            "currentPageInfo": "{0} of {1} pages",
            "totalItemsInfo": "({0} items)",
            "firstPageTooltip": "Go to first page",
            "lastPageTooltip": "Go to last page",
            "nextPageTooltip": "Go to next page",
            "previousPageTooltip": "Go to previous page",
            "nextPagerTooltip": "Go to next pager",
            "previousPagerTooltip": "Go to previous pager"
        }
    }
}

de-DE.json
{
    "TITLE": "Die Sprache dieser Anwendung ist Deutsch (Deutschland)",
    "GRID": {
        "DISPLAYVALUE": "Anzeigewert",
        "NUMBERVALUE": "Numerischer Wert",
        "DATEVALUE": "Datumswert"
    },
    "check" : {"check":"langcheck1","check2":"langcheck2"},
    "SYNCFUSION": {
        "grid": {
            "EmptyRecord": "Keine Daten vorhanden",
            "GroupDropArea": "Ziehen Sie einen Spaltenkopf hierhin, um die Spalte zu gruppieren",
            "UnGroup": "Klicken Sie hier, um die Gruppierung aufzuheben",
            "Item": "Eintrag",
            "Items": "Einträge"
        },
        "pager":{
            "currentPageInfo": "{0} von {1} Seiten",
            "totalItemsInfo": "({0} Zeilen)",
            "firstPageTooltip": "Zur ersten Seite",
            "lastPageTooltip": "Zur letzten Seite",
            "nextPageTooltip": "Zur nächsten Seite",
            "previousPageTooltip": "Zurück zur letzten Seite",
            "nextPagerTooltip": "Zur den nächsten Seiten",
            "previousPagerTooltip": "Zu den vorherigen Seiten"
        }
    }
}

// Culture.ts file
export class Culture {
    constructor(
        public culture: string,
        public language: string,
        public displayName: string,
        public isFallback: boolean,
    ) {
    }
}

// Cultures.ts file
import { Culture } from './culture';

export class Cultures {
  static readonly supportedCultures = [
    new Culture('en-US', 'en', 'English', true),
    new Culture('de-DE', 'de', 'Deutsch', false)
  ];
}

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Cultures } from './constants/cultures';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { PageSettingsModel } from '@syncfusion/ej2-grids';

@Component({
  selector: 'app-root',
  template: `<div style="text-align:center">
  <h1>
    {{'TITLE' | translate}}
  </h1>
  <select #lang class="form-control" (change)="onLanguageSelect($event, lang.value)">
    <option *ngFor="let l of supportedLanguages" [value]="l.culture">{{l.displayName}}</option>
  </select>
</div>
<p></p>
<ejs-grid #grid [dataSource]="items" [locale]="locale" [allowPaging]="true" [pageSettings]="pageSettings">
  <e-columns>
    <!-- header text adding for simple interpolation -->
    <e-column field="OrderID" headerText="{{'GRID.DISPLAYVALUE' | translate}}" width="80"></e-column>

    <!-- header text not adding when use translate -->
    <e-column field="CustomerID" headerText="{{'GRID.NUMBERVALUE' | translate}}" width="75" [allowSorting]="false"></e-column>
  </e-columns>
</ejs-grid>`
})
export class AppComponent {
  title = 'syncfusion-angular-app';
  public currentLang: string;
  public supportedLanguages: Array<any> = [];
  public pageSettings: PageSettingsModel;

  constructor(private translate: TranslateService) {
    this.pageSettings = { pageSize: 6 }
    this.currentLang = 'en-US';
    this.translate.use(this.currentLang);
    Cultures.supportedCultures.forEach((element) => {
      this.supportedLanguages.push(element);
    });
    this.langChangeEvent = translate.onLangChange.subscribe(() => {
      console.log('Reload due to language change');
  });
  }

  onLanguageSelect(event: any, lang: string): void {
    console.log('Language selected: ' + lang);
    this.translate.use(lang).subscribe(a => {
      const l10 = '{' + '"' + lang + '"' + ':' + JSON.stringify(a.SYNCFUSION) + '}';
      L10n.load(JSON.parse(l10));
      console.log('setCulture2 ' + lang.substr(0, 2));
      setCulture(lang.substr(0, 2));
    });
  }

  public get locale(): string {
    return this.translate.currentLang;
  }
}