Globalization and Localization in Angular Grid Component

17 Sep 202524 minutes to read

The Syncfusion Angular Grid component offers comprehensive globalization and localization support to enhance accessibility and usability for users from various regions and language backgrounds. These features allow data to be displayed in preferred languages and formats, creating an inclusive user experience.

Localization

The Syncfusion Angular Grid provides a built-in Localization library, enabling you to customize the text used in the grid to suit different languages or cultural preferences. With this library, you can change static text on various elements, such as group drop area text and pager information text, to different cultures, such as Arabic, Deutsch, French, and more.

Localization can be achieved by setting the locale property and providing a translation object.

Below is a list of locale keywords and their corresponding example texts as used in the Grid.

Data Rendering

Locale keywords Text Example
EmptyRecord No records to display Locale empty record
EmptyDataSourceError DataSource must not be empty at initial load since columns are generated from dataSource in auto-generated columns  

Columns

Locale keywords Text Example
True true Grid with True value
False false Grid with False value
ColumnHeader column header Grid column header
TemplateCell is template cell Grid template cell
ClipBoard clipboard Grid clipboard
CheckBoxLabel checkbox Grid checkbox label

ColumnChooser

Locale keywords Text Example
Columnchooser Columns Locale column chooser
ChooseColumns Choose Column Locale choose columns
ColumnChooserDialogARIA Column chooser Locale column chooser dialog ARIA

Editing

Locale keywords Text Example
Add Add Locale add
Edit Edit Locale edit
Cancel Cancel Locale cancel
Update Update Locale update
Delete Delete Locale delete
Save Save Locale save
EditOperationAlert No records selected for edit operation Locale edit operation alert
DeleteOperationAlert No records selected for delete operation Locale delete operation alert
SaveButton Save Locale save button
OKButton OK Locale ok button
CancelButton Cancel Locale cancel button
EditFormTitle Details of Locale edit form title
AddFormTitle Add New Record Locale add form title
BatchSaveConfirm Are you sure you want to save changes? Locale batch save confirm
BatchSaveLostChanges Unsaved changes will be lost. Are you sure you want to continue? Locale batch save lost changes
ConfirmDelete Are you sure you want to Delete Record? Locale confirm delete
CancelEdit Are you sure you want to Cancel the changes? Locale cancel edit
DialogEditARIA Edit dialog  
CommandColumnAria Command column header Grid command column header
DialogEdit Dialog edit Locale dialog edit

Grouping

Locale keywords Text Example
GroupDropArea Drag a column header here to group by that column Group drop area
UnGroup Click here to ungroup Locale ungroup
GroupDisable Grouping is disabled for this column Locale group disable
Item item Locale Item
Items items Locale Items
UnGroupButton Click here to ungroup  
GroupDescription Press Ctrl+Space to group Locale Group description
GroupButton Group button Locale Group button
UnGroupAria Ungroup button Locale Ungroup ARIA label
GroupSeperator Separator for the grouped columns Locale Group separator
UnGroupIcon Ungroup the grouped column Locale Ungroup icon
GroupedSortIcon Sort the grouped column Locale Grouped sort icon
GroupedDrag Drag the grouped column Locale Grouped drag icon
GroupCaption Group caption cell Locale Group caption cell
Expanded Expanded Locale Group expanded
Collapsed Collapsed Locale Group collapsed

Filtering

Locale keywords Text Example
InvalidFilterMessage Invalid Filter Data  
FilterbarTitle \s filter bar cell Locale filterbar title
Matchs No Matches Found Locale matchs
FilterButton Filter Locale filter button
ClearButton Clear Locale clear button
StartsWith Starts With Locale starts with
EndsWith Ends With Locale ends with
Contains Contains Locale contains
Equal Equal Locale equal
NotEqual Not Equal Locale not equal
LessThan Less Than Locale less than
LessThanOrEqual Less Than Or Equal Locale less than or equal
GreaterThan Greater Than Locale greater than
GreaterThanOrEqual Greater Than Or Equal Locale greater than or equal
ChooseDate Choose a Date Locale choose date
EnterValue Enter the value Locale enter value
SelectAll Select All Locale select all
Blanks Blanks Locale blanks
FilterTrue True Locale filter true
FilterFalse False Locale filter false
NoResult No Matches Found Locale no result
ClearFilter Clear Filter Locale clear filter
NumberFilter Number Filters Locale number filter
TextFilter Text Filters Locale text filter
DateFilter Date Filters Locale date filter
DateTimeFilter DateTime Filters Locale date time filter
MatchCase Match Case Locale match case
Between Between Locale between
CustomFilter Custom Filter Locale custom filter
CustomFilterPlaceHolder Enter the value Locale custom filter placeholder
CustomFilterDatePlaceHolder Choose a date Locale custom filter date placeholder
AND AND Locale AND
OR OR Locale OR
ShowRowsWhere Show rows where: Locale show rows where
NotStartsWith Does Not Start With Locale not starts with
Like Like Locale like
NotEndsWith Does Not End With Locale not ends with
NotContains Does Not Contain Locale not contains
IsNull Null Locale is null
NotNull Not Null Locale not null
IsEmpty Empty Locale is empty
IsNotEmpty Not Empty Locale is not empty
AddCurrentSelection Add current selection to filter Locale add current selection
FilterMenuDialogARIA Filter menu dialog Locale filter menu dialog ARIA
ExcelFilterDialogARIA Excel filter dialog Locale excel menu dialog ARIA
CustomFilterDialogARIA Custom filter dialog Locale Custom filter dialog ARIA
SortAtoZ Sort A to Z Locale sort AtoZ
SortZtoA Sort Z to A Locale sort ZtoA
SortByOldest Sort by Oldest Locale sort by oldest
SortByNewest Sort by Newest Locale sort by newest
SortSmallestToLargest Sort Smallest to Largest Locale sort smallest to largest
SortLargestToSmallest Sort Largest to Smallest Locale sort largest to smallest
FilterDescription Press Alt Down to open filter Menu Locale filter description

Searching

Locale keywords Text Example
Search Search Locale Grid search function
SearchColumns Search columns  
Clear Clear Locale Clear

Sorting

Locale keywords Text Example
Sort Sort Locale Grid sort function
SortDescription Press Enter to sort Locale Sort description

Toolbar

Locale keywords Text Example
Print Print Locale Toolbar print
Pdfexport PDF Export Locale Toolbar PDF export
Excelexport Excel Export ![Locale Toolbar Excel export]images/locale-excelexport.png)
Csvexport CSV Export Locale Toolbar CSV export

ColumnMenu

Locale keywords Text Example
FilterMenu Filter Locale Column menu filter
AutoFitAll Autofit all columns  
AutoFit Autofit this column  
ColumnMenuDialogARIA Column menu dialog Locale Column menu dialog ARIA
ColumnMenuDescription Press Alt + Down to open Column Menu Locale Column menu description

ContextMenu

Locale keywords Text Example
Copy Copy Locale copy
Group Group by this column Locale group
Ungroup Ungroup by this column Locale ungroup
autoFitAll Auto Fit all columns Locale autofit all
autoFit Auto Fit this column Locale autofit
Export Export Locale export
FirstPage First Page Locale first page
LastPage Last Page Locale last page
PreviousPage Previous Page Locale previous page
NextPage Next Page Locale next page
SortAscending Sort Ascending Locale sort ascending
SortDescending Sort Descending Locale sort descending
EditRecord Edit Record Locale edit record
DeleteRecord Delete Record Locale delete record

Pager

Locale keywords Text Example
currentPageInfo {0} of {1} pages Locale current page info
totalItemsInfo ({0} items) Locale total items info
firstPageTooltip Go to first page Locale first page tooltip
lastPageTooltip Go to last page Locale last page tooltip
nextPageTooltip Go to next page Locale next page tooltip
previousPageTooltip Go to previous page Locale previous page tooltip
nextPagerTooltip Go to next pager items Locale next pager tooltip
previousPagerTooltip Go to previous pager items Locale previous pager tooltip
pagerDropDown Items per page Locale pager drop down
pagerAllDropDown Items Locale pager all drop down
All All Locale pager all
totalItemInfo ({0} item) Locale total item info
Container Pager Container Locale pager container
Information Pager Information  
ExternalMsg Pager external message Locale pager external msg
Page Page  
Of of Locale pager of
Pages Pages  

Loading translations for a specific culture

The built-in localization library enables loading translation objects for different cultures. Use the load function from the L10n class to customize grid text. You can specify translation objects for specific cultures, such as German (de-DE), to display content in the required language.

Enable JSON module resolution in TypeScript by setting resolveJsonModule to true and esModuleInterop to true in your tsconfig.json file:

{
  compilerOptions: {
    resolveJsonModule: true,
    esModuleInterop: true,
  }
}

The following example demonstrates loading a translation object for German (de-DE) using the L10n.load function and assigning the locale as de-DE.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService, PageService } from '@syncfusion/ej2-angular-grids'

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

L10n.load(deDELocalization);

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [locale]='locale' [allowGrouping]='true' [allowPaging]='true'
             [pageSettings]='pageOptions' height='220px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public pageOptions?: PageSettingsModel;
    public locale: any = "de-DE";

    ngOnInit(): void {
        this.data = data;
        this.pageOptions = { pageSize: 6 };
    }
}
{
    "de-DE": {
      "grid": {
        "EmptyRecord": "Keine Datensätze zum Anzeigen",
        "True": "wahr",
        "False": "falsch",
        "InvalidFilterMessage": "Ungültige Filterdaten",
        "GroupDropArea": "Ziehen Sie eine Spaltenüberschrift hierher, um die Spalte zu gruppieren",
        "UnGroup": "Klicken Sie hier, um die Gruppierung aufzuheben",
        "GroupDisable": "Die Gruppierung ist für diese Spalte deaktiviert",
        "FilterbarTitle": "\"s Filterbalkenzelle",
        "EmptyDataSourceError": "Datenquelle darf beim ersten Laden nicht leer sein, da Spalten aus der Datenquelle automatisch generiert werden",
        "Add": "Hinzufügen",
        "Edit": "Bearbeiten",
        "Cancel": "Abbrechen",
        "Update": "Aktualisieren",
        "Delete": "Löschen",
        "Print": "Drucken",
        "Pdfexport": "PDF-Export",
        "Excelexport": "Excel-Export",
        "Wordexport": "Word-Export",
        "Csvexport": "CSV-Export",
        "Search": "Suchen",
        "Columnchooser": "Spalten",
        "Save": "Speichern",
        "Item": "Datensatz",
        "Items": "Datensätze",
        "EditOperationAlert": "Keine Datensätze zum Bearbeiten ausgewählt",
        "DeleteOperationAlert": "Keine Datensätze zum Löschen ausgewählt",
        "SaveButton": "Speichern",
        "OKButton": "in Ordnung",
        "CancelButton": "Abbrechen",
        "EditFormTitle": "Details von",
        "AddFormTitle": "Neuen Datensatz hinzufügen",
        "BatchSaveConfirm": "Möchten Sie die Änderungen wirklich speichern?",
        "BatchSaveLostChanges": "Nicht gespeicherte Änderungen gehen verloren. Sind Sie sicher, dass Sie fortfahren wollen?",
        "ConfirmDelete": "Möchten Sie den Datensatz wirklich löschen?",
        "CancelEdit": "Möchten Sie die Änderungen wirklich abbrechen?",
        "ChooseColumns": "Wählen Sie Spalten",
        "SearchColumns": "Spalten durchsuchen",
        "Matchs": "Keine Treffer gefunden",
        "FilterButton": "Filter",
        "ClearButton": "Löschen",
        "StartsWith": "Beginnt mit",
        "EndsWith": "Endet mit",
        "Contains": "Enthält",
        "Equal": "Gleich",
        "NotEqual": "Nicht gleich",
        "LessThan": "Weniger als",
        "LessThanOrEqual": "Weniger als oder gleich",
        "GreaterThan": "Grösser als",
        "GreaterThanOrEqual": "Grösser als oder gleich",
        "ChooseDate": "Wählen Sie ein Datum",
        "EnterValue": "Geben Sie den Wert ein",
        "Copy": "Kopieren",
        "Group": "Nach dieser Spalte gruppieren",
        "Ungroup": "Gruppierung nach dieser Spalte aufheben",
        "autoFitAll": "Automatisch alle Spalten anpassen",
        "autoFit": "Diese Spalte automatisch anpassen",
        "Export": "Export",
        "FirstPage": "Erste Seite",
        "LastPage": "Letzte Seite",
        "PreviousPage": "Vorherige Seite",
        "NextPage": "Nächste Seite",
        "SortAscending": "Aufsteigend sortieren",
        "SortDescending": "Absteigend sortieren",
        "EditRecord": "Datensatz bearbeiten",
        "DeleteRecord": "Datensatz löschen",
        "FilterMenu": "Filter",
        "SelectAll": "Wählen Sie Alle",
        "Blanks": "Leerzeichen",
        "FilterTrue": "Wahr",
        "FilterFalse": "Falsch",
        "NoResult": "Keine Treffer gefunden",
        "ClearFilter": "Filter löschen",
        "NumberFilter": "Anzahl Filter",
        "TextFilter": "Textfilter",
        "DateFilter": "Datumsfilter",
        "DateTimeFilter": "DatumsZeit-Filter",
        "MatchCase": "Gross- / Kleinschreibung",
        "Between": "Zwischen",
        "CustomFilter": "Benutzerdefinierte Filter",
        "CustomFilterPlaceHolder": "Geben Sie einen Wert ein",
        "CustomFilterDatePlaceHolder": "Wählen Sie ein Datum",
        "AND": "UND",
        "OR": "ODER",
        "ShowRowsWhere": "Zeilen anzeigen, in denen:",
        "NotStartsWith": "beginnt nicht mit",
        "Like": "Wie",
        "NotEndsWith": "endet nicht mit",
        "NotContains": "enthält nicht",
        "IsNull": "Null",
        "NotNull": "nicht null",
        "IsEmpty": "leer",
        "IsNotEmpty": "nicht leer",
        "AddCurrentSelection": "Aktuelle Auswahl zum Filter hinzufügen",
        "UnGroupButton": "Klicken Sie hier, um die Gruppierung aufzuheben",
        "AutoFitAll": "Automatisch alle Spalten anpassen",
        "AutoFit": "Diese Spalte automatisch anpassen",
        "Clear": "Klar",
        "FilterMenuDialogARIA": "Menüdialog filtern",
        "ExcelFilterDialogARIA": "Excel-Filterdialog",
        "DialogEditARIA": "Dialog bearbeiten",
        "ColumnChooserDialogARIA": "Spaltenauswahl",
        "ColumnMenuDialogARIA": "Spaltenmenüdialog",
        "CustomFilterDialogARIA": "Benutzerdefinierter Filterdialog",
        "SortAtoZ": "Sortiere von A bis Z",
        "SortZtoA": "Z bis A sortieren",
        "SortByOldest": "Nach Ältesten sortieren",
        "SortByNewest": "Nach Neuesten sortieren",
        "SortSmallestToLargest": "Vom Kleinsten zum Größten sortieren",
        "SortLargestToSmallest": "Vom Größten zum Kleinsten sortieren",
        "Sort": "Sortieren",
        "FilterDescription": "Drücken Sie die Alt-Nach-unten-Taste, um das Filtermenü zu öffnen",
        "SortDescription": "Drücken Sie zum Sortieren die Eingabetaste",
        "ColumnMenuDescription": "Drücken Sie die Alt-Nach-unten-Taste, um das Spaltenmenü zu öffnen",
        "GroupDescription": "Drücken Sie zum Gruppieren die Strg-Leertaste",
        "ColumnHeader": " Spaltenüberschrift ",
        "TemplateCell": " ist eine Vorlagenzelle",
        "CommandColumnAria": "ist die Spaltenüberschrift der Befehlsspalte ",
        "DialogEdit": "Dialog bearbeiten",
        "ClipBoard": "Zwischenablage",
        "GroupButton": "Gruppenschaltfläche",
        "UnGroupAria": "Schaltfläche zum Aufheben der Gruppierung",
        "GroupSeperator": "Trennzeichen für die gruppierten Spalten",
        "UnGroupIcon": "heben Sie die Gruppierung der gruppierten Spalte auf ",
        "GroupedSortIcon": "sortieren Sie die gruppierte Spalte ",
        "GroupedDrag": "Ziehen Sie die gruppierte Spalte",
        "GroupCaption": " ist eine Gruppenunterschriftszelle",
        "CheckBoxLabel": "Kontrollkästchen",
        "Expanded": "Erweitert",
        "Collapsed": "Zusammengebrochen"
      },
      "pager": {
        "currentPageInfo": "{0} von {1} Seiten",
        "totalItemsInfo": "({0} Datensätze)",
        "firstPageTooltip": "Gehe zur ersten Seite",
        "lastPageTooltip": "Gehe zur letzten Seite",
        "nextPageTooltip": "Gehe zur nächsten Seite",
        "previousPageTooltip": "Zurück zur letzten Seite",
        "nextPagerTooltip": "Gehe zu den nächsten Pager-Elementen",
        "previousPagerTooltip": "Gehen Sie zu den vorherigen Pager-Elementen",
        "pagerDropDown": "Datensätze pro Seite",
        "pagerAllDropDown": "Datensätze",
        "All": "Alle",
        "totalItemInfo": "({0} Datensatz)",
        "Container": "Pager-Container",
        "Information": "Pager-Informationen",
        "ExternalMsg": "Pager-externe Nachricht",
        "Page": "Buchseite ",
        "Of": " von ",
        "Pages": " Seiten"
      }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Loading translations for additional cultures

The Loading translations feature allows you to specify translation objects for different cultures, such as Deutsch, Arabic, French and display the Grid’s content in the desired language.

To work with JSON files in your application, you can enable JSON module resolution in TypeScript by adding the resolveJsonModule to true to your tsconfig.json file. Additionally, you can enhance module interoperation by setting esModuleInterop to true as shown below:

{
  compilerOptions: {
    resolveJsonModule: true,
    esModuleInterop: true,
  }
}

The following example demonstrates how to load a translation object for French (fr) culture, by defining the locale to fr-FR and by using the load function of L10n class from the ej2-base module.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService, PageService, EditService, ToolbarService } from '@syncfusion/ej2-angular-grids'

import { L10n } from '@syncfusion/ej2-base';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import { PageSettingsModel, EditSettingsModel,ToolbarItems } from '@syncfusion/ej2-angular-grids';
import frFRLocalization from './locale.json';

L10n.load(frFRLocalization);

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService, PageService, EditService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [locale]='locale' [allowGrouping]='true' [allowPaging]='true'
             [pageSettings]='pageOptions' [editSettings]='editSettings' [toolbar]='toolbar' height='220px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public pageOptions?: PageSettingsModel;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    public locale: any = 'fr-FR';

    ngOnInit(): void {
        this.data = data;
        this.pageOptions = { pageSize: 6 };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
    }
}
{
  "fr-FR": {
    "grid": {
      "EmptyRecord": "Aucun enregistrement à afficher",
      "True": "vrai",
      "False": "faux",
      "InvalidFilterMessage": "Données de filtre non valides",
      "GroupDropArea": "Faites glisser un en-tête de colonne ici pour regrouper sa colonne",
      "UnGroup": "Cliquez ici pour dissocier",
      "GroupDisable": "Le regroupement est désactivé pour cette colonne",
      "FilterbarTitle": "Cellule de barre de filtre \"s",
      "EmptyDataSourceError": "DataSource ne doit pas être vide lors du chargement initial car les colonnes sont générées à partir de dataSource dans AutoGenerate Column Grid",
      "Add": "Ajouter",
      "Edit": "Éditer",
      "Cancel": "Annuler",
      "Update": "Mise à jour",
      "Delete": "Supprimer",
      "Print": "Impression",
      "Pdfexport": "Exportation PDF",
      "Excelexport": "Exportation Excel",
      "Wordexport": "Exportation de mots",
      "Csvexport": "Exportation CSV",
      "Search": "Chercher",
      "Columnchooser": "Colonnes",
      "Save": "sauvegarder",
      "Item": "article",
      "Items": "articles",
      "EditOperationAlert": "Aucun enregistrement sélectionné pour l'opération d'édition",
      "DeleteOperationAlert": "Aucun enregistrement sélectionné pour l'opération de suppression",
      "SaveButton": "Sauvegarder",
      "OKButton": "Ok",
      "CancelButton": "Annuler",
      "EditFormTitle": "Les détails de",
      "AddFormTitle": "Ajouter un nouvel enregistrement",
      "BatchSaveConfirm": "Voulez-vous vraiment enregistrer les modifications ?",
      "BatchSaveLostChanges": "Les modifications non enregistrées seront perdues. Es-tu sur de vouloir continuer ?",
      "ConfirmDelete": "Voulez-vous vraiment supprimer l'enregistrement ?",
      "CancelEdit": "Voulez-vous vraiment annuler les modifications ?",
      "ChooseColumns": "Choisissez la colonne",
      "SearchColumns": "colonnes de recherche",
      "Matchs": "Aucun résultat",
      "FilterButton": "Filtrer",
      "ClearButton": "Effacer",
      "StartsWith": "Commence par",
      "EndsWith": "Se termine par",
      "Contains": "Contient",
      "Equal": "Égal",
      "NotEqual": "Différent",
      "LessThan": "Inférieur",
      "LessThanOrEqual": "Inférieur ou égal",
      "GreaterThan": "Supérieur",
      "GreaterThanOrEqual": "Supérieur ou égal",
      "ChooseDate": "Choisissez une date",
      "EnterValue": "Entrez la valeur",
      "Copy": "Copie",
      "Group": "Regrouper par cette colonne",
      "Ungroup": "Dissocier par cette colonne",
      "autoFitAll": "Ajuster automatiquement toutes les colonnes",
      "autoFit": "Ajuster automatiquement cette colonne",
      "Export": "Exportation",
      "FirstPage": "Première page",
      "LastPage": "Dernière page",
      "PreviousPage": "Page précédente",
      "NextPage": "Page suivante",
      "SortAscending": "Trier par ordre croissant",
      "SortDescending": "Trier par ordre décroissant",
      "EditRecord": "Modifier l'enregistrement",
      "DeleteRecord": "Supprimer l'enregistrement",
      "FilterMenu": "Filtre",
      "SelectAll": "Tout sélectionner",
      "Blanks": "Blancs",
      "FilterTrue": "Vrai",
      "FilterFalse": "Faux",
      "NoResult": "Aucun résultat",
      "ClearFilter": "Effacer le filtre",
      "NumberFilter": "Filtres numériques",
      "TextFilter": "Filtres de texte",
      "DateFilter": "Filtres de date",
      "DateTimeFilter": "Filtres DateTime",
      "MatchCase": "Cas de correspondance",
      "Between": "Entre",
      "CustomFilter": "Filtre personnalisé",
      "CustomFilterPlaceHolder": "Entrez la valeur",
      "CustomFilterDatePlaceHolder": "Choisissez une date",
      "AND": "ET",
      "OR": "OU",
      "ShowRowsWhere": "Afficher les lignes où:",
      "NotStartsWith": "Ne commence pas par",
      "Like": "Comme",
      "NotEndsWith": "Ne se termine pas par",
      "NotContains": "Ne contient pas",
      "IsNull": "Nul",
      "NotNull": "Non nul",
      "IsEmpty": "Vide",
      "IsNotEmpty": "Pas vide",
      "AddCurrentSelection": "Ajouter la sélection actuelle au filtre",
      "UnGroupButton": "Cliquez ici pour dissocier",
      "AutoFitAll": "Ajuster automatiquement toutes les colonnes",
      "AutoFit": "Ajuster automatiquement cette colonne",
      "Clear": "Dégager",
      "FilterMenuDialogARIA": "Boîte de dialogue du menu Filtre",
      "ExcelFilterDialogARIA": "Boîte de dialogue de filtre Excel",
      "DialogEditARIA": "Boîte de dialogue Modifier",
      "ColumnChooserDialogARIA": "Sélecteur de colonne",
      "ColumnMenuDialogARIA": "Boîte de dialogue du menu des colonnes",
      "CustomFilterDialogARIA": "Boîte de dialogue Filtre personnalisé",
      "SortAtoZ": "Trier de A à Z",
      "SortZtoA": "Trier de Z à A",
      "SortByOldest": "Trier par le plus ancien",
      "SortByNewest": "Trier par Plus récent",
      "SortSmallestToLargest": "Trier du plus petit au plus grand",
      "SortLargestToSmallest": "Trier du plus grand au plus petit",
      "Sort": "Sorte",
      "FilterDescription": "Appuyez sur Alt Bas pour ouvrir le menu du filtre",
      "SortDescription": "Appuyez sur Entrée pour trier",
      "ColumnMenuDescription": "Appuyez sur Alt Bas pour ouvrir le menu des colonnes",
      "GroupDescription": "Appuyez sur Ctrl espace pour grouper",
      "ColumnHeader": " en-tête de colonne ",
      "TemplateCell": " est une cellule modèle",
      "CommandColumnAria": "est l'en-tête de colonne de la colonne de commande ",
      "DialogEdit": "Modifier la boîte de dialogue",
      "ClipBoard": "presse-papiers",
      "GroupButton": "Bouton de groupe",
      "UnGroupAria": "bouton dissocier",
      "GroupSeperator": "Séparateur pour les colonnes groupées",
      "UnGroupIcon": "dissocier la colonne groupée ",
      "GroupedSortIcon": "trier la colonne groupée ",
      "GroupedDrag": "Faites glisser la colonne groupée",
      "GroupCaption": " est une cellule de légende de groupe",
      "CheckBoxLabel": "case à cocher",
      "Expanded": "Étendue",
      "Collapsed": "S'est effondré"
    },
    "pager": {
      "currentPageInfo": "{0} de {1} pages",
      "totalItemsInfo": "({0} éléments)",
      "firstPageTooltip": "Aller à la première page",
      "lastPageTooltip": "Aller à la dernière page",
      "nextPageTooltip": "Aller à la page suivante",
      "previousPageTooltip": "Aller à la page précédente",
      "nextPagerTooltip": "Aller aux éléments suivants du téléavertisseur",
      "previousPagerTooltip": "Accéder aux éléments de téléavertisseur précédents",
      "pagerDropDown": "objets par page",
      "pagerAllDropDown": "Articles",
      "All": "Tout",
      "totalItemInfo": "({0} élément)",
      "Container": "Conteneur de téléavertisseur",
      "Information": "Informations sur le téléavertisseur",
      "ExternalMsg": "Message externe du téléavertisseur",
      "Page": "Page",
      "Of": " de ",
      "Pages": " pages"
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Switching between localizations

The Angular Grid enables dynamic switching of localization at runtime. This is useful for applications requiring language changes based on user preferences.

Step 1: Import and load the necessary CLDR (Common Locale Data Repository) data for the target culture:

loadCldr(
  caGregorian,
  currencies,
  numbers,
  timeZoneNames,
  numberingSystems
);

Step 2: To import json files in your application, you can enable JSON module resolution in TypeScript by adding the resolveJsonModule to true to your tsconfig.json file. Additionally, you can enhance module interoperation by setting esModuleInterop to true as shown below:

{
  compilerOptions: {
    resolveJsonModule: true,
    esModuleInterop: true,
  }
}

Step 3: Use the setCulture method to change the locale and setCurrencyCode to update currency formatting.

To switch to French (fr-FR) culture and set the currency to EUR:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, PageService  } from '@syncfusion/ej2-angular-grids'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import cagregorian from './ca-gregorian.json';
import currencies from './currencies.json';
import numbers from './numbers.json';
import timeZoneNames from './timeZoneNames.json';
import numberingSystems from './numberingSystems.json'
import frFRLocalization from './locale.json';

L10n.load(frFRLocalization);
setCulture('fr-FR'); // Change the Grid culture
setCurrencyCode('EUR');

@Component({
imports: [GridModule,ButtonModule],
providers: [PageService ],
standalone: true,
    selector: 'app-root',
    template: `
    <button ejs-button id="frButton" cssClass="e-outline" (click)="ChangeFrLocale()">Change FR Locale</button>
    <button ejs-button id="enButton" style="margin-left:5px" cssClass="e-outline" (click)="ChangeEnLocale()">Change En Locale</button>
    <ejs-grid style="padding: 10px 10px" [dataSource]='data' [allowPaging]='true' height='220px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
            <e-column field='Freight' headerText='Freight' format="C2"  width=90></e-column>
            <e-column field="ShipCountry" headerText="Ship Country" width="100"></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
        loadCldr(
            cagregorian,
            currencies,
            numbers,
            timeZoneNames,
            numberingSystems
        );
    }

    ChangeFrLocale() {
        setCulture('fr-FR'); // Change the Grid culture to French locale
        setCurrencyCode('EUR'); // Change the currency code based on French culture
    }

    ChangeEnLocale() {
        setCulture('en-US'); // Change the Grid culture to English locale
        setCurrencyCode('USD'); // Change the currency code based on American English culture
    }
}
{
  "fr-FR": {
    "grid": {
      "EmptyRecord": "Aucun enregistrement à afficher",
      "True": "vrai",
      "False": "faux",
      "InvalidFilterMessage": "Données de filtre non valides",
      "GroupDropArea": "Faites glisser un en-tête de colonne ici pour regrouper sa colonne",
      "UnGroup": "Cliquez ici pour dissocier",
      "GroupDisable": "Le regroupement est désactivé pour cette colonne",
      "FilterbarTitle": "Cellule de barre de filtre \"s",
      "EmptyDataSourceError": "DataSource ne doit pas être vide lors du chargement initial car les colonnes sont générées à partir de dataSource dans AutoGenerate Column Grid",
      "Add": "Ajouter",
      "Edit": "Éditer",
      "Cancel": "Annuler",
      "Update": "Mise à jour",
      "Delete": "Supprimer",
      "Print": "Impression",
      "Pdfexport": "Exportation PDF",
      "Excelexport": "Exportation Excel",
      "Wordexport": "Exportation de mots",
      "Csvexport": "Exportation CSV",
      "Search": "Chercher",
      "Columnchooser": "Colonnes",
      "Save": "sauvegarder",
      "Item": "article",
      "Items": "articles",
      "EditOperationAlert": "Aucun enregistrement sélectionné pour l'opération d'édition",
      "DeleteOperationAlert": "Aucun enregistrement sélectionné pour l'opération de suppression",
      "SaveButton": "Sauvegarder",
      "OKButton": "Ok",
      "CancelButton": "Annuler",
      "EditFormTitle": "Les détails de",
      "AddFormTitle": "Ajouter un nouvel enregistrement",
      "BatchSaveConfirm": "Voulez-vous vraiment enregistrer les modifications ?",
      "BatchSaveLostChanges": "Les modifications non enregistrées seront perdues. Es-tu sur de vouloir continuer ?",
      "ConfirmDelete": "Voulez-vous vraiment supprimer l'enregistrement ?",
      "CancelEdit": "Voulez-vous vraiment annuler les modifications ?",
      "ChooseColumns": "Choisissez la colonne",
      "SearchColumns": "colonnes de recherche",
      "Matchs": "Aucun résultat",
      "FilterButton": "Filtrer",
      "ClearButton": "Effacer",
      "StartsWith": "Commence par",
      "EndsWith": "Se termine par",
      "Contains": "Contient",
      "Equal": "Égal",
      "NotEqual": "Différent",
      "LessThan": "Inférieur",
      "LessThanOrEqual": "Inférieur ou égal",
      "GreaterThan": "Supérieur",
      "GreaterThanOrEqual": "Supérieur ou égal",
      "ChooseDate": "Choisissez une date",
      "EnterValue": "Entrez la valeur",
      "Copy": "Copie",
      "Group": "Regrouper par cette colonne",
      "Ungroup": "Dissocier par cette colonne",
      "autoFitAll": "Ajuster automatiquement toutes les colonnes",
      "autoFit": "Ajuster automatiquement cette colonne",
      "Export": "Exportation",
      "FirstPage": "Première page",
      "LastPage": "Dernière page",
      "PreviousPage": "Page précédente",
      "NextPage": "Page suivante",
      "SortAscending": "Trier par ordre croissant",
      "SortDescending": "Trier par ordre décroissant",
      "EditRecord": "Modifier l'enregistrement",
      "DeleteRecord": "Supprimer l'enregistrement",
      "FilterMenu": "Filtre",
      "SelectAll": "Tout sélectionner",
      "Blanks": "Blancs",
      "FilterTrue": "Vrai",
      "FilterFalse": "Faux",
      "NoResult": "Aucun résultat",
      "ClearFilter": "Effacer le filtre",
      "NumberFilter": "Filtres numériques",
      "TextFilter": "Filtres de texte",
      "DateFilter": "Filtres de date",
      "DateTimeFilter": "Filtres DateTime",
      "MatchCase": "Cas de correspondance",
      "Between": "Entre",
      "CustomFilter": "Filtre personnalisé",
      "CustomFilterPlaceHolder": "Entrez la valeur",
      "CustomFilterDatePlaceHolder": "Choisissez une date",
      "AND": "ET",
      "OR": "OU",
      "ShowRowsWhere": "Afficher les lignes où:",
      "NotStartsWith": "Ne commence pas par",
      "Like": "Comme",
      "NotEndsWith": "Ne se termine pas par",
      "NotContains": "Ne contient pas",
      "IsNull": "Nul",
      "NotNull": "Non nul",
      "IsEmpty": "Vide",
      "IsNotEmpty": "Pas vide",
      "AddCurrentSelection": "Ajouter la sélection actuelle au filtre",
      "UnGroupButton": "Cliquez ici pour dissocier",
      "AutoFitAll": "Ajuster automatiquement toutes les colonnes",
      "AutoFit": "Ajuster automatiquement cette colonne",
      "Clear": "Dégager",
      "FilterMenuDialogARIA": "Boîte de dialogue du menu Filtre",
      "ExcelFilterDialogARIA": "Boîte de dialogue de filtre Excel",
      "DialogEditARIA": "Boîte de dialogue Modifier",
      "ColumnChooserDialogARIA": "Sélecteur de colonne",
      "ColumnMenuDialogARIA": "Boîte de dialogue du menu des colonnes",
      "CustomFilterDialogARIA": "Boîte de dialogue Filtre personnalisé",
      "SortAtoZ": "Trier de A à Z",
      "SortZtoA": "Trier de Z à A",
      "SortByOldest": "Trier par le plus ancien",
      "SortByNewest": "Trier par Plus récent",
      "SortSmallestToLargest": "Trier du plus petit au plus grand",
      "SortLargestToSmallest": "Trier du plus grand au plus petit",
      "Sort": "Sorte",
      "FilterDescription": "Appuyez sur Alt Bas pour ouvrir le menu du filtre",
      "SortDescription": "Appuyez sur Entrée pour trier",
      "ColumnMenuDescription": "Appuyez sur Alt Bas pour ouvrir le menu des colonnes",
      "GroupDescription": "Appuyez sur Ctrl espace pour grouper",
      "ColumnHeader": " en-tête de colonne ",
      "TemplateCell": " est une cellule modèle",
      "CommandColumnAria": "est l'en-tête de colonne de la colonne de commande ",
      "DialogEdit": "Modifier la boîte de dialogue",
      "ClipBoard": "presse-papiers",
      "GroupButton": "Bouton de groupe",
      "UnGroupAria": "bouton dissocier",
      "GroupSeperator": "Séparateur pour les colonnes groupées",
      "UnGroupIcon": "dissocier la colonne groupée ",
      "GroupedSortIcon": "trier la colonne groupée ",
      "GroupedDrag": "Faites glisser la colonne groupée",
      "GroupCaption": " est une cellule de légende de groupe",
      "CheckBoxLabel": "case à cocher",
      "Expanded": "Étendue",
      "Collapsed": "S'est effondré"
    },
    "pager": {
      "currentPageInfo": "{0} de {1} pages",
      "totalItemsInfo": "({0} éléments)",
      "firstPageTooltip": "Aller à la première page",
      "lastPageTooltip": "Aller à la dernière page",
      "nextPageTooltip": "Aller à la page suivante",
      "previousPageTooltip": "Aller à la page précédente",
      "nextPagerTooltip": "Aller aux éléments suivants du téléavertisseur",
      "previousPagerTooltip": "Accéder aux éléments de téléavertisseur précédents",
      "pagerDropDown": "objets par page",
      "pagerAllDropDown": "Articles",
      "All": "Tout",
      "totalItemInfo": "({0} élément)",
      "Container": "Conteneur de téléavertisseur",
      "Information": "Informations sur le téléavertisseur",
      "ExternalMsg": "Message externe du téléavertisseur",
      "Page": "Page",
      "Of": " de ",
      "Pages": " pages"
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Internationalization

The Internationalization library provides localized display for numbers, dates, and times in the Grid based on the chosen language and region. This is achieved using the Internationalization library and format strings defined in the columns.format property.

To work with JSON files in your application, you can enable JSON module resolution in TypeScript by adding the resolveJsonModule to true to your tsconfig.json file. Additionally, you can enhance module interoperation by setting esModuleInterop to true as shown below:

{
  compilerOptions: {
    resolveJsonModule: true,
    esModuleInterop: true,
  }
}

You need to load the culture format files corresponding to the desired locale in ngOnInit function. This ensures that the Grid component uses the correct format strings for number, date, and time values based on the selected culture. This can be demonstrated in the below example,

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, GroupService, PageService } from '@syncfusion/ej2-angular-grids'



import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { Component, OnInit } from '@angular/core';
import { data } from './datasource';
import cagregorian from './ca-gregorian.json';
import currencies from './currencies.json';
import numbers from './numbers.json';
import timeZoneNames from './timeZoneNames.json';
import numberingSystems from './numberingSystems.json'
import deDELocalization from './locale.json'

L10n.load(deDELocalization);

@Component({
imports: [
        
        GridModule
    ],

providers: [GroupService, PageService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowPaging]="true" [allowGrouping]="true" height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='Freight' headerText='Freight' [format]='formatOptions' textAlign='Right' width=80></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public formatOptions?: object;
    

    ngOnInit(): void {
        setCulture('de-DE');
        setCurrencyCode('EUR');

        loadCldr(
            cagregorian,
            currencies,
            numbers,
            timeZoneNames,
            numberingSystems
        );

        this.data = data;
        this.formatOptions = { format: 'C2', useGrouping: false, minimumSignificantDigits: 1, maximumSignificantDigits: 3 }
    }
}
{
    "de-DE": {
      "grid": {
        "EmptyRecord": "Keine Datensätze zum Anzeigen",
        "True": "wahr",
        "False": "falsch",
        "InvalidFilterMessage": "Ungültige Filterdaten",
        "GroupDropArea": "Ziehen Sie eine Spaltenüberschrift hierher, um die Spalte zu gruppieren",
        "UnGroup": "Klicken Sie hier, um die Gruppierung aufzuheben",
        "GroupDisable": "Die Gruppierung ist für diese Spalte deaktiviert",
        "FilterbarTitle": "\"s Filterbalkenzelle",
        "EmptyDataSourceError": "Datenquelle darf beim ersten Laden nicht leer sein, da Spalten aus der Datenquelle automatisch generiert werden",
        "Add": "Hinzufügen",
        "Edit": "Bearbeiten",
        "Cancel": "Abbrechen",
        "Update": "Aktualisieren",
        "Delete": "Löschen",
        "Print": "Drucken",
        "Pdfexport": "PDF-Export",
        "Excelexport": "Excel-Export",
        "Wordexport": "Word-Export",
        "Csvexport": "CSV-Export",
        "Search": "Suchen",
        "Columnchooser": "Spalten",
        "Save": "Speichern",
        "Item": "Datensatz",
        "Items": "Datensätze",
        "EditOperationAlert": "Keine Datensätze zum Bearbeiten ausgewählt",
        "DeleteOperationAlert": "Keine Datensätze zum Löschen ausgewählt",
        "SaveButton": "Speichern",
        "OKButton": "in Ordnung",
        "CancelButton": "Abbrechen",
        "EditFormTitle": "Details von",
        "AddFormTitle": "Neuen Datensatz hinzufügen",
        "BatchSaveConfirm": "Möchten Sie die Änderungen wirklich speichern?",
        "BatchSaveLostChanges": "Nicht gespeicherte Änderungen gehen verloren. Sind Sie sicher, dass Sie fortfahren wollen?",
        "ConfirmDelete": "Möchten Sie den Datensatz wirklich löschen?",
        "CancelEdit": "Möchten Sie die Änderungen wirklich abbrechen?",
        "ChooseColumns": "Wählen Sie Spalten",
        "SearchColumns": "Spalten durchsuchen",
        "Matchs": "Keine Treffer gefunden",
        "FilterButton": "Filter",
        "ClearButton": "Löschen",
        "StartsWith": "Beginnt mit",
        "EndsWith": "Endet mit",
        "Contains": "Enthält",
        "Equal": "Gleich",
        "NotEqual": "Nicht gleich",
        "LessThan": "Weniger als",
        "LessThanOrEqual": "Weniger als oder gleich",
        "GreaterThan": "Grösser als",
        "GreaterThanOrEqual": "Grösser als oder gleich",
        "ChooseDate": "Wählen Sie ein Datum",
        "EnterValue": "Geben Sie den Wert ein",
        "Copy": "Kopieren",
        "Group": "Nach dieser Spalte gruppieren",
        "Ungroup": "Gruppierung nach dieser Spalte aufheben",
        "autoFitAll": "Automatisch alle Spalten anpassen",
        "autoFit": "Diese Spalte automatisch anpassen",
        "Export": "Export",
        "FirstPage": "Erste Seite",
        "LastPage": "Letzte Seite",
        "PreviousPage": "Vorherige Seite",
        "NextPage": "Nächste Seite",
        "SortAscending": "Aufsteigend sortieren",
        "SortDescending": "Absteigend sortieren",
        "EditRecord": "Datensatz bearbeiten",
        "DeleteRecord": "Datensatz löschen",
        "FilterMenu": "Filter",
        "SelectAll": "Wählen Sie Alle",
        "Blanks": "Leerzeichen",
        "FilterTrue": "Wahr",
        "FilterFalse": "Falsch",
        "NoResult": "Keine Treffer gefunden",
        "ClearFilter": "Filter löschen",
        "NumberFilter": "Anzahl Filter",
        "TextFilter": "Textfilter",
        "DateFilter": "Datumsfilter",
        "DateTimeFilter": "DatumsZeit-Filter",
        "MatchCase": "Gross- / Kleinschreibung",
        "Between": "Zwischen",
        "CustomFilter": "Benutzerdefinierte Filter",
        "CustomFilterPlaceHolder": "Geben Sie einen Wert ein",
        "CustomFilterDatePlaceHolder": "Wählen Sie ein Datum",
        "AND": "UND",
        "OR": "ODER",
        "ShowRowsWhere": "Zeilen anzeigen, in denen:",
        "NotStartsWith": "beginnt nicht mit",
        "Like": "Wie",
        "NotEndsWith": "endet nicht mit",
        "NotContains": "enthält nicht",
        "IsNull": "Null",
        "NotNull": "nicht null",
        "IsEmpty": "leer",
        "IsNotEmpty": "nicht leer",
        "AddCurrentSelection": "Aktuelle Auswahl zum Filter hinzufügen",
        "UnGroupButton": "Klicken Sie hier, um die Gruppierung aufzuheben",
        "AutoFitAll": "Automatisch alle Spalten anpassen",
        "AutoFit": "Diese Spalte automatisch anpassen",
        "Clear": "Klar",
        "FilterMenuDialogARIA": "Menüdialog filtern",
        "ExcelFilterDialogARIA": "Excel-Filterdialog",
        "DialogEditARIA": "Dialog bearbeiten",
        "ColumnChooserDialogARIA": "Spaltenauswahl",
        "ColumnMenuDialogARIA": "Spaltenmenüdialog",
        "CustomFilterDialogARIA": "Benutzerdefinierter Filterdialog",
        "SortAtoZ": "Sortiere von A bis Z",
        "SortZtoA": "Z bis A sortieren",
        "SortByOldest": "Nach Ältesten sortieren",
        "SortByNewest": "Nach Neuesten sortieren",
        "SortSmallestToLargest": "Vom Kleinsten zum Größten sortieren",
        "SortLargestToSmallest": "Vom Größten zum Kleinsten sortieren",
        "Sort": "Sortieren",
        "FilterDescription": "Drücken Sie die Alt-Nach-unten-Taste, um das Filtermenü zu öffnen",
        "SortDescription": "Drücken Sie zum Sortieren die Eingabetaste",
        "ColumnMenuDescription": "Drücken Sie die Alt-Nach-unten-Taste, um das Spaltenmenü zu öffnen",
        "GroupDescription": "Drücken Sie zum Gruppieren die Strg-Leertaste",
        "ColumnHeader": " Spaltenüberschrift ",
        "TemplateCell": " ist eine Vorlagenzelle",
        "CommandColumnAria": "ist die Spaltenüberschrift der Befehlsspalte ",
        "DialogEdit": "Dialog bearbeiten",
        "ClipBoard": "Zwischenablage",
        "GroupButton": "Gruppenschaltfläche",
        "UnGroupAria": "Schaltfläche zum Aufheben der Gruppierung",
        "GroupSeperator": "Trennzeichen für die gruppierten Spalten",
        "UnGroupIcon": "heben Sie die Gruppierung der gruppierten Spalte auf ",
        "GroupedSortIcon": "sortieren Sie die gruppierte Spalte ",
        "GroupedDrag": "Ziehen Sie die gruppierte Spalte",
        "GroupCaption": " ist eine Gruppenunterschriftszelle",
        "CheckBoxLabel": "Kontrollkästchen",
        "Expanded": "Erweitert",
        "Collapsed": "Zusammengebrochen"
      },
      "pager": {
        "currentPageInfo": "{0} von {1} Seiten",
        "totalItemsInfo": "({0} Datensätze)",
        "firstPageTooltip": "Gehe zur ersten Seite",
        "lastPageTooltip": "Gehe zur letzten Seite",
        "nextPageTooltip": "Gehe zur nächsten Seite",
        "previousPageTooltip": "Zurück zur letzten Seite",
        "nextPagerTooltip": "Gehe zu den nächsten Pager-Elementen",
        "previousPagerTooltip": "Gehen Sie zu den vorherigen Pager-Elementen",
        "pagerDropDown": "Datensätze pro Seite",
        "pagerAllDropDown": "Datensätze",
        "All": "Alle",
        "totalItemInfo": "({0} Datensatz)",
        "Container": "Pager-Container",
        "Information": "Pager-Informationen",
        "ExternalMsg": "Pager-externe Nachricht",
        "Page": "Buchseite ",
        "Of": " von ",
        "Pages": " Seiten"
      }
    }
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • In the above sample, the Freight column is formatted using NumberFormatOptions.
  • The default locale value is en-US. To use a different culture, set the locale property accordingly.

Right-to-Left (RTL) Support

The Syncfusion Angular Grid supports right-to-left (RTL) layout, adjusting text direction and grid layout for languages such as Arabic, Farsi, and Urdu. Enabling the RTL property provides a more accessible experience for users of right-to-left scripts.

Enable RTL in the Grid by setting the enableRtl property to true. This adjusts both the text and layout for RTL languages.

To work with JSON files in your application, you can enable JSON module resolution in TypeScript by adding the resolveJsonModule to true to your tsconfig.json file. Additionally, you can enhance module interoperation by setting esModuleInterop to true as shown below:

{
  compilerOptions: {
    resolveJsonModule: true,
    esModuleInterop: true,
  }
}

In the following example, the EJ2 Toggle Switch Button component is added to enable or diable the Right to Left (RTL) feature for the Arabic (ar-AE) locale. When the switch is toggled, the change event is triggered and the enableRtl property of the grid is updated accordingly.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {
    ButtonModule,
    CheckBoxModule,
    RadioButtonModule,
    SwitchModule,
} from '@syncfusion/ej2-angular-buttons'
import { GridModule, PageService, ToolbarService, EditService, GroupService, FilterService, SortService, ReorderService, ColumnMenuService, ColumnChooserService } from '@syncfusion/ej2-angular-grids'



import { L10n, setCulture } from '@syncfusion/ej2-base';
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ChangeEventArgs } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, PageSettingsModel, ToolbarItems, EditSettingsModel } from '@syncfusion/ej2-angular-grids';
import arAELocalization from './locale.json';

L10n.load(arAELocalization);

@Component({
imports: [
        
        GridModule,
        ButtonModule,
        CheckBoxModule,
        RadioButtonModule,
        SwitchModule,
    ],

providers: [PageService, ToolbarService, EditService, 
        GroupService, FilterService, SortService, 
        ReorderService, ColumnMenuService, ColumnChooserService],
standalone: true,
    selector: 'app-root',
    template: `
    <div>
    <label style="padding: 10px 10px">
    Enable or diable RTL mode
    </label>
    <ejs-switch id="switch" (change)="onSwitchChange($event)"></ejs-switch>
  </div>
    <ejs-grid #grid [dataSource]='data' [allowSorting]='true' [allowReordering]='true' 
    [allowFiltering]='true' [allowGrouping]='true' [editSettings]="editSettings" [toolbar]="toolbar" 
    [enableRtl]='true' [locale]='locale' [allowPaging]='true' [pageSettings]='pageOptions'
    [showColumnMenu]='true' [showColumnChooser]='true'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' isPrimaryKey='true' width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                </e-columns>
               </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public pageOptions?: PageSettingsModel;
    public locale: any = 'ar-AE';
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItems[];
    @ViewChild('grid')
    public grid?: GridComponent;

    ngOnInit(): void {
        this.data = data;
        this.pageOptions = { pageSize: 7 };
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode:'Normal' };
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];
    }

    onSwitchChange(args: ChangeEventArgs) {
        if (args.checked) {
          (this.grid as GridComponent).enableRtl = false;
        } else {
          (this.grid as GridComponent).enableRtl = true;
        }
      }
}
{
    "ar-AE": {
      "grid": {
        "EmptyRecord": "لا سجلات لعرضها",
        "True": "صحيح",
        "False": "خاطئة",
        "InvalidFilterMessage": "بيانات تصفية غير صالحة",
        "GroupDropArea": "اسحب رأس العمود هنا لتجميع العمود",
        "UnGroup": "انقر هنا لإلغاء التجميع",
        "GroupDisable": "تم تعطيل التجميع لهذا العمود",
        "FilterbarTitle": "خلية شريط مرشح",
        "EmptyDataSourceError": "يجب ألا يكون DataSource فارغًا عند التحميل الأولي نظرًا لأن الأعمدة يتم إنشاؤها من DataSource في شبكة إنشاء عمود تلقائي",
        "Add": "إضافة",
        "Edit": "تعديل",
        "Cancel": "إلغاء",
        "Update": "تحديث",
        "Delete": "حذف",
        "Print": "طباعة",
        "Pdfexport": "تصدير قوات الدفاع الشعبي",
        "Excelexport": "اكسل التصدير",
        "Wordexport": "كلمة تصدير",
        "Csvexport": "تصدير CSV",
        "Search": "بحث",
        "Columnchooser": "أعمدة",
        "Save": "حفظ",
        "Item": "بند",
        "Items": "العناصر",
        "EditOperationAlert": "لم يتم تحديد سجلات لعملية التحرير",
        "DeleteOperationAlert": "لم يتم تحديد سجلات لعملية الحذف",
        "SaveButton": "حفظ",
        "OKButton": "حسنا",
        "CancelButton": "إلغاء",
        "EditFormTitle": "تفاصيل",
        "AddFormTitle": "إضافة سجل جديد",
        "BatchSaveConfirm": "هل أنت متأكد أنك تريد حفظ التغييرات؟",
        "BatchSaveLostChanges": "سيتم فقد التغييرات غير المحفوظة. هل أنت متأكد أنك تريد المتابعة؟",
        "ConfirmDelete": "هل أنت متأكد أنك تريد حذف السجل؟",
        "CancelEdit": "هل أنت متأكد من أنك تريد إلغاء التغييرات؟",
        "ChooseColumns": "اختيار العمود",
        "SearchColumns": "أعمدة البحث",
        "Matchs": "لم يتم العثور على تطابق",
        "FilterButton": "منقي",
        "ClearButton": "واضح",
        "StartsWith": "ابدا ب",
        "EndsWith": "ينتهي بـ",
        "Contains": "يحتوي على",
        "Equal": "مساو",
        "NotEqual": "ليس متساوي",
        "LessThan": "أقل من",
        "LessThanOrEqual": "اصغر من او يساوي",
        "GreaterThan": "أكثر من",
        "GreaterThanOrEqual": "أكبر من أو يساوي",
        "ChooseDate": "اختيار التاريخ",
        "EnterValue": "أدخل القيمة",
        "Copy": "نسخ",
        "Group": "تجميع حسب هذا العمود",
        "Ungroup": "فك تجميع بواسطة هذا العمود",
        "autoFitAll": "احتواء تلقائي لجميع الأعمدة",
        "autoFit": "احتواء تلقائي لهذا العمود",
        "Export": "تصدير",
        "FirstPage": "الصفحة الأولى",
        "LastPage": "آخر صفحة",
        "PreviousPage": "الصفحة السابقة",
        "NextPage": "الصفحة التالية",
        "SortAscending": "فرز تصاعدي",
        "SortDescending": "ترتيب تنازلي",
        "EditRecord": "تحرير السجل",
        "DeleteRecord": "حذف سجل",
        "FilterMenu": "منقي",
        "SelectAll": "اختر الكل",
        "Blanks": "الفراغات",
        "FilterTrue": "صحيح",
        "FilterFalse": "خاطئة",
        "NoResult": "لم يتم العثور على تطابق",
        "ClearFilter": "مرشح واضح",
        "NumberFilter": "عدد المرشحات",
        "TextFilter": "مرشحات النص",
        "DateFilter": "مرشحات التاريخ",
        "DateTimeFilter": "مرشحات DateTime",
        "MatchCase": "حالة مباراة",
        "Between": "ما بين",
        "CustomFilter": "تصفية مخصص",
        "CustomFilterPlaceHolder": "أدخل القيمة",
        "CustomFilterDatePlaceHolder": "اختيار موعد",
        "AND": "و",
        "OR": "أو",
        "ShowRowsWhere": "إظهار الصفوف حيث:",
        "NotStartsWith": "لا تبدأ بـ",
        "Like": "يحب",
        "NotEndsWith": "لا تنتهي ب",
        "NotContains": "لا يحتوي",
        "IsNull": "باطل",
        "NotNull": "غير فارغة",
        "IsEmpty": "فارغ",
        "IsNotEmpty": "ليس فارغًا",
        "AddCurrentSelection": "إضافة التحديد الحالي للتصفية",
        "UnGroupButton": "انقر هنا لفك التجميع",
        "AutoFitAll": "احتواء تلقائي لجميع الأعمدة",
        "AutoFit": "احتواء تلقائي لهذا العمود",
        "Clear": "صافي",
        "FilterMenuDialogARIA": "مربع حوار قائمة التصفية",
        "ExcelFilterDialogARIA": "مربع حوار مرشح Excel",
        "DialogEditARIA": "مربع حوار التحرير",
        "ColumnChooserDialogARIA": "منتقي الأعمدة",
        "ColumnMenuDialogARIA": "مربع حوار قائمة العمود",
        "CustomFilterDialogARIA": "مربع حوار عامل التصفية المخصص",
        "SortAtoZ": "فرز من الألف إلى الياء",
        "SortZtoA": "فرز من Z إلى A",
        "SortByOldest": "فرز حسب الأقدم",
        "SortByNewest": "فرز حسب الأحدث",
        "SortSmallestToLargest": "الفرز من الأصغر إلى الأكبر",
        "SortLargestToSmallest": "الفرز من الأكبر إلى الأصغر",
        "Sort": "فرز",
        "FilterDescription": "اضغط على Alt Down لفتح قائمة التصفية",
        "SortDescription": "اضغط على Enter للفرز",
        "ColumnMenuDescription": "اضغط على Alt لأسفل لفتح قائمة العمود",
        "GroupDescription": "اضغط على مفتاح Ctrl مسافة للمجموعة",
        "ColumnHeader": " رأس العمود ",
        "TemplateCell": " هي خلية قالب",
        "CommandColumnAria": "هو رأس عمود الأمر ",
        "DialogEdit": "تحرير الحوار",
        "ClipBoard": "الحافظة",
        "GroupButton": "زر المجموعة",
        "UnGroupAria": "زر فك التجميع",
        "GroupSeperator": "فاصل للأعمدة المجمعة",
        "UnGroupIcon": "قم بفك تجميع العمود المجمع ",
        "GroupedSortIcon": "قم بفرز العمود المجمع ",
        "GroupedDrag": "اسحب العمود المجمع",
        "GroupCaption": " هي خلية تسمية توضيحية جماعية",
        "CheckBoxLabel": "خانة الاختيار",
        "Expanded": "موسع",
        "Collapsed": "انهار"
      },
      "pager": {
        "currentPageInfo": "{0} من {1} صفحة",
        "totalItemsInfo": "({0} عناصر)",
        "firstPageTooltip": "الذهاب إلى الصفحة الأولى",
        "lastPageTooltip": "الذهاب إلى الصفحة الأخيرة",
        "nextPageTooltip": "انتقل إلى الصفحة التالية",
        "previousPageTooltip": "الانتقال إلى الصفحة السابقة",
        "nextPagerTooltip": "انتقل إلى عناصر بيجر التالية",
        "previousPagerTooltip": "انتقل إلى عناصر بيجر السابقة",
        "pagerDropDown": "مواد لكل صفحة",
        "pagerAllDropDown": "العناصر",
        "All": "الكل",
        "totalItemInfo": "({0} بند)",
        "Container": "حاوية بيجر",
        "Information": "معلومات جهاز النداء",
        "ExternalMsg": "رسالة خارجية بيجر",
        "Page": "صفحة ",
        "Of": " من ",
        "Pages": " الصفحات"
      }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also