Apply Grid Localization from external JSON file in Angular Grid

[Albert K]

I would like to know if L10n can be stored as individual json file eg en_GB.json, de_DE.json file, instead of declaring everything in one json.  Thank you.

import { L10n, setCulture } from '@syncfusion/ej2-base';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import {PageSettingsModel } from '@syncfusion/ej2-angular-grids';

setCulture('de-DE');

L10n.load({
    'de-DE': {
        'grid': {
            'EmptyRecord': 'Keine Aufzeichnungen angezeigt',
            'GroupDropArea': 'Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte',
            'UnGroup': 'Klicken Sie hier, um die Gruppierung aufheben',
            'EmptyDataSourceError': 'DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster',
            'Item': 'Artikel',
            'Items': 'Artikel'
        },
        'pager':{
            'currentPageInfo': '{0} von {1} Seiten',
            'totalItemsInfo': '({0} Beiträge)',
            'firstPageTooltip': 'Zur ersten Seite',
            'lastPageTooltip': 'Zur letzten Seite',
            'nextPageTooltip': 'Zur nächsten Seite',
            'previousPageTooltip': 'Zurück zur letzten Seit',
            'nextPagerTooltip': 'Zum nächsten Pager',
            'previousPagerTooltip': 'Zum vorherigen Pager'
        }
    }
});
 Copy

[Thavasianand Sankaranarayanan]

Hi Albert, 

Greetings from Syncfusion support. 

Yes, we can load as json file. Please refer the below code example. 

[app.component.ts] 

 

import { Component, OnInit } from '@angular/core'; 

import { loadCldr, L10n, setCulture } from '@syncfusion/ej2-base'; 

import { orderDetails } from './data'; 

import * as pt from './pt.json'; 

 

loadCldr(pt.default); 

setCulture('pt'); 

L10n.load(pt.default); 

 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html' 

}) 

export class AppComponent { 

    public data: Object[] = []; 

 

    ngOnInit(): void { 

        this.data = orderDetails; 

    } 

} 

--------------------------------------------------------------------------------------------------------------------------- 

[pt.json] 

{ 

   "pt":{ 

        "grid": { 

            "EmptyRecord": "Keine Aufzeichnungen angezeigt", 

            "GroupDropArea": "Ziehen Sie einen Spaltenkopf hier, um die Gruppe ihre Spalte", 

            "UnGroup": "Klicken Sie hier, um die Gruppierung aufheben", 

"EmptyDataSourceError": "DataSource darf bei der Erstauslastung nicht leer sein, da Spalten aus der dataSource im AutoGenerate Spaltenraster", 

            "Item": "Artikel", 

            "Items": "Artikel" 

        }, 

        "pager": { 

            "currentPageInfo": "{0} von {1} Seiten", 

            "totalItemsInfo": "({0} Beiträge)", 

            "firstPageTooltip": "Zur ersten Seite", 

            "lastPageTooltip": "Zur letzten Seite", 

            "nextPageTooltip": "Zur nächsten Seite", 

            "previousPageTooltip": "Zurück zur letzten Seit", 

            "nextPagerTooltip": "Zum nächsten Pager", 

            "previousPagerTooltip": "Zum vorherigen Pager" 

        } 

   } 

} 

We have prepared a simple sample in the following stackblitz link: 

Link: https://stackblitz.com/edit/angular-lageqi?file=main.ts 

Please let us know if you need further assistance on this. 

Regards, 

Thavasianand S.