Ngx translate pipe for header text in Angular Grid component

28 Mar 20233 minutes to read

You can use the ngx-translate to translate the headerText of grid’s column. This can be achieved by using the translate pipe for headerText property.

This is demonstrated in the below sample code where translate is applied to headerText property of the grid columns,

import { Component } from '@angular/core';  
import {TranslateService} from '@ngx-translate/core';  
  
@Component({
    selector: 'app-container',
    template: `<ejs-grid id="Grid" [dataSource]="dataSource" allowPaging="true">  
                    <e-columns>  
                        <e-column field="OrderID" [isPrimaryKey]="true" headerText="Id"></e-column>
                        <e-column field="CustomerID" headerText="Value"></e-column>
                    </e-columns>  
                </ejs-grid>`
})

export class AppComponent implements OnInit {

    constructor(translate: TranslateService) {
        // Specifies the available languages to the service
        translate.addLangs(['en', 'fr'])
        // Specifies the current languages to the service
        translate.use('fr');
    }

    public dataSource: any = [
    {
      OrderID: 10248, CustomerID: 'VINET', OrderDate: new Date(8364186e5),
    },
    {
      OrderID: 10249, CustomerID: 'TOMSP', OrderDate: new Date(836505e6),
    }];
}

Import the required modules in app.module.ts file along with translate loader function,

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {GridAllModule} from '@syncfusion/ej2-angular-grids';

import {AppComponent} from './app.component';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

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

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

Then add the json file with the translation text in the required languages,

en.json

{  
    "Value": "Order ID!",
    "Id": "Customer ID"
}

fr.json

{  
    "Value": "numéro de commande!",
    "Id": "N ° de client"
}

Angular 5 sample