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

live-editing/configs/BaseConfig-AngularLocale.ts

@@ -0,0 +1,12 @@
+export const BaseAppAngularLocaleConfig = {
+    modules: [
+        { 'module': 'BrowserModule', 'import': '@angular/platform-browser' },
+        { 'module': 'FormsModule', 'import': '@angular/forms' },
+        { 'module': 'HammerModule', 'import': '@angular/platform-browser' },
+        { 'module': 'HammerModule', 'import': '@angular/platform-browser' },
+    ],
+    providers: [
+        { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
+    ],
+    router: false
+}

live-editing/configs/BaseConfig.ts

@@ -2,10 +2,12 @@ export const BaseAppConfig = {
     modules: [
         { 'module': 'BrowserModule', 'import': '@angular/platform-browser' },
         { 'module': 'FormsModule', 'import': '@angular/forms' },
-        { 'module': 'HammerModule', 'import': '@angular/platform-browser' }
+        { 'module': 'HammerModule', 'import': '@angular/platform-browser' },
+        { 'module': 'HammerModule', 'import': '@angular/platform-browser' },
     ],
     providers: [
-        { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' }
+        { 'provider': 'provideAnimations()', 'import': '@angular/platform-browser/animations' },
+        { 'provider': 'provideIgniteIntl()', 'import': 'igniteui-angular' }
     ],
     routesConfig: {
         router: false

live-editing/configs/LocalizationConfigGenerator.ts

@@ -1,10 +1,7 @@
-import { IgxGridModule } from 'igniteui-angular/grids/grid';
-import { IgxIconModule } from 'igniteui-angular/icon';
-import { IgxInputGroupModule } from 'igniteui-angular/input-group';
-import { IgxTimePickerModule } from 'igniteui-angular/time-picker';
-import { IgxSelectModule } from 'igniteui-angular/select';
-import {AppModuleConfig, Config, IConfigGenerator} from 'igniteui-live-editing'
-import { BaseAppConfig } from './BaseConfig';;
+import { Config, IConfigGenerator} from 'igniteui-live-editing'
+import { BaseAppConfig } from './BaseConfig';
+import { BaseAppAngularLocaleConfig } from './BaseConfig-AngularLocale';
+
 export class LocalizationConfigGenerator implements IConfigGenerator {
     public generateConfigs(): Config[] {
         const configs = new Array<Config>();
@@ -14,23 +11,23 @@ export class LocalizationConfigGenerator implements IConfigGenerator {
             component: 'LocalizationSample1Component',
             additionalFiles: ['/src/app/data/nwindData.ts'],
             additionalDependencies: ['igniteui-angular-i18n'],
-            appConfig: BaseAppConfig
+            appConfig: BaseAppAngularLocaleConfig
         }));
 
         // localization sample 2
         configs.push(new Config({
             component: 'LocalizationSample2Component',
             additionalFiles: ['/src/app/data/nwindData.ts'],
             additionalDependencies: ['igniteui-angular-i18n'],
-            appConfig: BaseAppConfig
+            appConfig: BaseAppAngularLocaleConfig
         }));
 
         // localization sample 3
         configs.push(new Config({
             component: 'LocalizationSample3Component',
             additionalFiles: ['/src/app/data/nwindData.ts'],
             additionalDependencies: ['igniteui-angular-i18n'],
-            appConfig: BaseAppConfig
+            appConfig: BaseAppAngularLocaleConfig
         }));
 
         // localization all resources

package.json

@@ -73,13 +73,14 @@
     "file-saver": "^2.0.2",
     "fuse.js": "^7.1.0",
     "hammerjs": "^2.0.8",
-    "igniteui-angular": "^21.0.0",
+    "igniteui-angular": "^21.1.0-alpha.1",
     "igniteui-angular-charts": "^20.2.0",
     "igniteui-angular-core": "^20.2.0",
     "igniteui-angular-extras": "^21.0.0",
-    "igniteui-angular-i18n": "^21.0.0",
+    "igniteui-angular-i18n": "^21.1.0-alpha.1",
     "igniteui-dockmanager": "^1.17.0",
     "igniteui-grid-lite": "^0.0.1",
+    "igniteui-i18n-resources": "^1.0.2",
     "igniteui-live-editing": "^3.3.0",
     "igniteui-webcomponents": "^6.2.0",
     "marked": "^16.3.0",

src/app/app.config.ts

@@ -7,6 +7,7 @@ import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 import { provideRouter } from "@angular/router";
 import { AppRoutes } from "./app.routes";
 import { OverflowService } from "./services/overflow.service";
+import { provideIgniteIntl } from "igniteui-angular";
 
 export const AppConfig: ApplicationConfig = {
     providers: [
@@ -19,6 +20,7 @@ export const AppConfig: ApplicationConfig = {
         provideHttpClient(withInterceptorsFromDi(), withFetch()),
         provideAnimations(),
         provideRouter(AppRoutes),
-        OverflowService, provideClientHydration(withEventReplay())
+        OverflowService, provideClientHydration(withEventReplay()),
+        provideIgniteIntl()
     ]
 };

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;
+    }
+}