feat(localization): Move old samples for localization and add separate sample for the new localization.

package.json

@@ -78,6 +78,7 @@
     "igniteui-angular-extras": "^20.0.0",
     "igniteui-angular-i18n": "^20.1.0",
     "igniteui-dockmanager": "^1.17.0",
+    "igniteui-i18n-resources": "0.6.0-alpha.4",
     "igniteui-live-editing": "^3.1.1",
     "igniteui-webcomponents": "^6.2.0",
     "minireset.css": "0.0.6",

src/app/services/localization-samples-old/localization-all-resources/localization-all-resources.component.html

@@ -0,0 +1,26 @@
+<div class="grid__wrapper">
+  <igx-grid #grid [data]="data" [autoGenerate]="false" height="520px" width="100%"
+    [allowFiltering]="true" [locale]="locale" [rowEditable]="true" [primaryKey]="'ProductID'">
+    <igx-grid-toolbar>
+      <igx-grid-toolbar-title>Grid with Localization</igx-grid-toolbar-title>
+      <igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
+        @for (locale of selectLocales; track locale) {
+          <igx-select-item [value]="locale">
+            {{ locale }}
+          </igx-select-item>
+        }
+      </igx-select>
+    </igx-grid-toolbar>
+    <igx-column field="ProductName" header="Product Name" [groupable]="true">
+    </igx-column>
+    <igx-column field="QuantityPerUnit" header="Quantity Per Unit" [groupable]="true">
+    </igx-column>
+    <igx-column field="UnitPrice" header="Unit Price" [sortable]="true" [hasSummary]="true"
+      [dataType]="'currency'" [groupable]="true">
+    </igx-column>
+    <igx-column field="OrderDate" header="Order Date" [dataType]="'date'" [groupable]="true">
+    </igx-column>
+    <igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true">
+    </igx-column>
+  </igx-grid>
+</div>

src/app/services/localization-samples-old/localization-all-resources/localization-all-resources.component.scss

@@ -0,0 +1,7 @@
+:host {
+    .grid__wrapper {
+        margin: 16px 32px;
+    }
+
+    --ig-size: var(--ig-size-small);
+}

src/app/services/localization-samples-old/localization-all-resources/localization-all-resources.component.ts

@@ -0,0 +1,122 @@
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/member-delimiter-style */
+/* eslint-disable @typescript-eslint/naming-convention */
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { registerLocaleData } from '@angular/common';
+import localeBG from '@angular/common/locales/bg';
+import localeCS from '@angular/common/locales/cs';
+import localeDA from '@angular/common/locales/da';
+import localeDE from '@angular/common/locales/de';
+import localeEN from '@angular/common/locales/en';
+import localeES from '@angular/common/locales/es';
+import localeFR from '@angular/common/locales/fr';
+import localeHU from '@angular/common/locales/hu';
+import localeIT from '@angular/common/locales/it';
+import localeJA from '@angular/common/locales/ja';
+import localeKO from '@angular/common/locales/ko';
+import localeNB from '@angular/common/locales/nb';
+import localeNL from '@angular/common/locales/nl';
+import localePL from '@angular/common/locales/pl';
+import localePT from '@angular/common/locales/pt';
+import localeRO from '@angular/common/locales/ro';
+import localeSV from '@angular/common/locales/sv';
+import localeTR from '@angular/common/locales/tr';
+import localeHI from '@angular/common/locales/hi';
+import localeHans from '@angular/common/locales/zh-Hans';
+import localeHant from '@angular/common/locales/zh-Hant';
+import { DATA } from '../../../data/nwindData';
+import { IgxGridComponent, GridResourceStringsEN, IGridResourceStrings, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, IgxSelectItemComponent, IgxColumnComponent } from 'igniteui-angular';
+import {
+    IgxResourceStringsBG, IgxResourceStringsCS, IgxResourceStringsDA, IgxResourceStringsDE,
+    IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsHU, IgxResourceStringsIT,
+    IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsNB, IgxResourceStringsNL, IgxResourceStringsPL,
+    IgxResourceStringsPT, IgxResourceStringsRO, IgxResourceStringsSV, IgxResourceStringsTR,
+    IgxResourceStringsZHHANS, IgxResourceStringsZHHANT
+} from 'igniteui-angular-i18n';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+    selector: 'app-localization-all-resources-old',
+    styleUrls: ['./localization-all-resources.component.scss'],
+    templateUrl: 'localization-all-resources.component.html',
+    imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxColumnComponent]
+})
+export class LocalizationAllResourcesOldComponent implements OnInit {
+    @ViewChild('grid', { read: IgxGridComponent, static: true })
+    public grid: IgxGridComponent;
+    public data: any[];
+    public locale: string;
+    public locales: { type: string, resource: object }[];
+    public selectLocales = [
+        'HI', 'BG', 'CS', 'DA', 'DE', 'EN', 'ES', 'FR', 'HU', 'IT', 'JA', 'KO', 'NB', 'NL',
+        'PL', 'PT', 'RO', 'SV', 'TR', 'zh-Hans', 'zh-Hant'
+    ];
+    public partialCustomHindi: IGridResourceStrings;
+
+    constructor() { }
+    public ngOnInit(): void {
+        registerLocaleData(localeBG);
+        registerLocaleData(localeCS);
+        registerLocaleData(localeDA);
+        registerLocaleData(localeDE);
+        registerLocaleData(localeEN);
+        registerLocaleData(localeES);
+        registerLocaleData(localeFR);
+        registerLocaleData(localeHU);
+        registerLocaleData(localeIT);
+        registerLocaleData(localeJA);
+        registerLocaleData(localeKO);
+        registerLocaleData(localeNB);
+        registerLocaleData(localeNL);
+        registerLocaleData(localePL);
+        registerLocaleData(localePT);
+        registerLocaleData(localeRO);
+        registerLocaleData(localeSV);
+        registerLocaleData(localeTR);
+        registerLocaleData(localeHI);
+        registerLocaleData(localeHans);
+        registerLocaleData(localeHant);
+
+        this.data = DATA;
+
+        // Creating a custom locale (HI) for specific grid strings.
+        // Similarly can localize all needed strings in a separate IgxResourceStringsHI file (feel free to contribute)
+        this.partialCustomHindi = {
+            igx_grid_summary_count: 'गणना',
+            igx_grid_summary_min: 'न्यून',
+            igx_grid_summary_max: 'अधिक',
+            igx_grid_summary_sum: 'योग',
+            igx_grid_summary_average: 'औसत'
+        };
+
+        this.locales = [
+            { type: 'BG', resource: IgxResourceStringsBG },
+            { type: 'CS', resource: IgxResourceStringsCS },
+            { type: 'DA', resource: IgxResourceStringsDA },
+            { type: 'DE', resource: IgxResourceStringsDE },
+            { type: 'ES', resource: IgxResourceStringsES },
+            { type: 'FR', resource: IgxResourceStringsFR },
+            { type: 'HU', resource: IgxResourceStringsHU },
+            { type: 'IT', resource: IgxResourceStringsIT },
+            { type: 'JA', resource: IgxResourceStringsJA },
+            { type: 'KO', resource: IgxResourceStringsKO },
+            { type: 'EN', resource: GridResourceStringsEN },
+            { type: 'HI', resource: this.partialCustomHindi },
+            { type: 'NB', resource: IgxResourceStringsNB },
+            { type: 'NL', resource: IgxResourceStringsNL },
+            { type: 'PL', resource: IgxResourceStringsPL },
+            { type: 'PT', resource: IgxResourceStringsPT },
+            { type: 'RO', resource: IgxResourceStringsRO },
+            { type: 'SV', resource: IgxResourceStringsSV },
+            { type: 'TR', resource: IgxResourceStringsTR },
+            { type: 'zh-Hans', resource: IgxResourceStringsZHHANS },
+            { type: 'zh-Hant', resource: IgxResourceStringsZHHANT }
+        ];
+        this.locale = 'EN';
+    }
+
+    public updateLocale() {
+        const newLocale = this.locales.find(x => x.type === this.locale).resource;
+        this.grid.resourceStrings = newLocale;
+    }
+}

src/app/services/localization-samples/localization-all-resources/localization-all-resources.component.ts

@@ -2,38 +2,26 @@
 /* eslint-disable @typescript-eslint/member-delimiter-style */
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { registerLocaleData } from '@angular/common';
-import localeBG from '@angular/common/locales/bg';
-import localeCS from '@angular/common/locales/cs';
-import localeDA from '@angular/common/locales/da';
-import localeDE from '@angular/common/locales/de';
-import localeEN from '@angular/common/locales/en';
-import localeES from '@angular/common/locales/es';
-import localeFR from '@angular/common/locales/fr';
-import localeHU from '@angular/common/locales/hu';
-import localeIT from '@angular/common/locales/it';
-import localeJA from '@angular/common/locales/ja';
-import localeKO from '@angular/common/locales/ko';
-import localeNB from '@angular/common/locales/nb';
-import localeNL from '@angular/common/locales/nl';
-import localePL from '@angular/common/locales/pl';
-import localePT from '@angular/common/locales/pt';
-import localeRO from '@angular/common/locales/ro';
-import localeSV from '@angular/common/locales/sv';
-import localeTR from '@angular/common/locales/tr';
-import localeHI from '@angular/common/locales/hi';
-import localeHans from '@angular/common/locales/zh-Hans';
-import localeHant from '@angular/common/locales/zh-Hant';
 import { DATA } from '../../../data/nwindData';
-import { IgxGridComponent, GridResourceStringsEN, IGridResourceStrings, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, IgxSelectItemComponent, IgxColumnComponent } from 'igniteui-angular';
 import {
-    IgxResourceStringsBG, IgxResourceStringsCS, IgxResourceStringsDA, IgxResourceStringsDE,
-    IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsHU, IgxResourceStringsIT,
-    IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsNB, IgxResourceStringsNL, IgxResourceStringsPL,
-    IgxResourceStringsPT, IgxResourceStringsRO, IgxResourceStringsSV, IgxResourceStringsTR,
-    IgxResourceStringsZHHANS, IgxResourceStringsZHHANT
-} from 'igniteui-angular-i18n';
+    IgxGridComponent,
+    IgxGridToolbarComponent,
+    IgxGridToolbarTitleComponent,
+    IgxSelectComponent,
+    IgxSelectItemComponent,
+    IgxColumnComponent,
+    registerI18n,
+    setCurrentI18n
+} from 'igniteui-angular';
 import { FormsModule } from '@angular/forms';
+import {
+    IGridResourceStrings,
+    ResourceStringsEN, ResourceStringsBG, ResourceStringsCS, ResourceStringsDA, ResourceStringsDE,
+    ResourceStringsES, ResourceStringsFR, ResourceStringsHU, ResourceStringsIT,
+    ResourceStringsJA, ResourceStringsKO, ResourceStringsNB, ResourceStringsNL,
+    ResourceStringsPL, ResourceStringsPT, ResourceStringsRO, ResourceStringsSV,
+    ResourceStringsTR, ResourceStringsZHHANS, ResourceStringsZHHANT
+ } from 'igniteui-i18n-resources';
 
 @Component({
     selector: 'app-localization-all-resources',
@@ -55,68 +43,42 @@ export class LocalizationAllResourcesComponent implements OnInit {
 
     constructor() { }
     public ngOnInit(): void {
-        registerLocaleData(localeBG);
-        registerLocaleData(localeCS);
-        registerLocaleData(localeDA);
-        registerLocaleData(localeDE);
-        registerLocaleData(localeEN);
-        registerLocaleData(localeES);
-        registerLocaleData(localeFR);
-        registerLocaleData(localeHU);
-        registerLocaleData(localeIT);
-        registerLocaleData(localeJA);
-        registerLocaleData(localeKO);
-        registerLocaleData(localeNB);
-        registerLocaleData(localeNL);
-        registerLocaleData(localePL);
-        registerLocaleData(localePT);
-        registerLocaleData(localeRO);
-        registerLocaleData(localeSV);
-        registerLocaleData(localeTR);
-        registerLocaleData(localeHI);
-        registerLocaleData(localeHans);
-        registerLocaleData(localeHant);
+        registerI18n(ResourceStringsEN, 'en');
+        registerI18n(ResourceStringsBG, 'bg');
+        registerI18n(ResourceStringsCS, 'cs');
+        registerI18n(ResourceStringsDA, 'da');
+        registerI18n(ResourceStringsDE, 'de');
+        registerI18n(ResourceStringsES, 'es');
+        registerI18n(ResourceStringsFR, 'fr');
+        registerI18n(ResourceStringsHU, 'hu');
+        registerI18n(ResourceStringsIT, 'it');
+        registerI18n(ResourceStringsJA, 'ja');
+        registerI18n(ResourceStringsKO, 'ko');
+        registerI18n(ResourceStringsNB, 'nb');
+        registerI18n(ResourceStringsNL, 'nl');
+        registerI18n(ResourceStringsPL, 'pl');
+        registerI18n(ResourceStringsPT, 'pt');
+        registerI18n(ResourceStringsRO, 'ro');
+        registerI18n(ResourceStringsSV, 'sv');
+        registerI18n(ResourceStringsTR, 'tr');
+        registerI18n(ResourceStringsZHHANS, 'zh-Hans');
+        registerI18n(ResourceStringsZHHANT, 'zh-Hant');
+        registerI18n(this.partialCustomHindi, 'hi');
 
         this.data = DATA;
 
         // Creating a custom locale (HI) for specific grid strings.
         // Similarly can localize all needed strings in a separate IgxResourceStringsHI file (feel free to contribute)
         this.partialCustomHindi = {
-            igx_grid_summary_count: 'गणना',
-            igx_grid_summary_min: 'न्यून',
-            igx_grid_summary_max: 'अधिक',
-            igx_grid_summary_sum: 'योग',
-            igx_grid_summary_average: 'औसत'
+            grid_summary_count: 'गणना',
+            grid_summary_min: 'न्यून',
+            grid_summary_max: 'अधिक',
+            grid_summary_sum: 'योग',
+            grid_summary_average: 'औसत'
         };
-
-        this.locales = [
-            { type: 'BG', resource: IgxResourceStringsBG },
-            { type: 'CS', resource: IgxResourceStringsCS },
-            { type: 'DA', resource: IgxResourceStringsDA },
-            { type: 'DE', resource: IgxResourceStringsDE },
-            { type: 'ES', resource: IgxResourceStringsES },
-            { type: 'FR', resource: IgxResourceStringsFR },
-            { type: 'HU', resource: IgxResourceStringsHU },
-            { type: 'IT', resource: IgxResourceStringsIT },
-            { type: 'JA', resource: IgxResourceStringsJA },
-            { type: 'KO', resource: IgxResourceStringsKO },
-            { type: 'EN', resource: GridResourceStringsEN },
-            { type: 'HI', resource: this.partialCustomHindi },
-            { type: 'NB', resource: IgxResourceStringsNB },
-            { type: 'NL', resource: IgxResourceStringsNL },
-            { type: 'PL', resource: IgxResourceStringsPL },
-            { type: 'PT', resource: IgxResourceStringsPT },
-            { type: 'RO', resource: IgxResourceStringsRO },
-            { type: 'SV', resource: IgxResourceStringsSV },
-            { type: 'TR', resource: IgxResourceStringsTR },
-            { type: 'zh-Hans', resource: IgxResourceStringsZHHANS },
-            { type: 'zh-Hant', resource: IgxResourceStringsZHHANT }
-        ];
-        this.locale = 'EN';
     }
 
     public updateLocale() {
-        const newLocale = this.locales.find(x => x.type === this.locale).resource;
-        this.grid.resourceStrings = newLocale;
+        setCurrentI18n(this.locale);
     }
 }

src/app/services/services-routes-data.ts

@@ -8,6 +8,7 @@ export const servicesRoutesData = {
     'localization-sample-1': { displayName: 'Localize one component', parentName: 'Localization' },
     'localization-sample-2': { displayName: 'Localize All', parentName: 'Localization' },
     'localization-sample-3': { displayName: 'Localize partially', parentName: 'Localization' },
+    'localization-all-resources-old': { displayName: 'Localize application (Legacy)', parentName: 'Localization' },
     'localization-all-resources': { displayName: 'Localize application', parentName: 'Localization' },
     'transaction-base': { displayName: 'Base Transaction', parentName: 'Transactions' }
 };