feat(demos): Add locale to properties panel and remove root locale register.

Author: skrustev

src/app/date-picker/date-picker.sample.ts

@@ -93,6 +93,13 @@ export class DatePickerSampleComponent {
     );
 
     public panelConfig: PropertyPanelConfig = {
+        locale: {
+            control: {
+                type: 'locale',
+                options: ['HI', 'BG', 'EN', 'DE', 'ES', 'FR', 'IT', 'JA', 'KO', 'zh-Hans', 'zh-Hant'],
+                defaultValue: 'EN',
+            }
+        },
         size: {
             control: {
                 type: 'button-group',

src/app/properties-panel/properties-panel.component.html

@@ -8,6 +8,16 @@ <h5 class="properties-panel__title">Properties Panel</h5>
             </label>
             }
 
+            @if (getControlType(key) === 'locale') {
+                <igx-select (selectionChanging)="updateLocale($event)" [placeholder]="config[key]?.control?.defaultValue ?? ''">
+                    @for (locale of config[key]?.control.options; track locale) {
+                        <igx-select-item [value]="locale">
+                            {{ locale }}
+                        </igx-select-item>
+                    }
+                </igx-select>
+            }
+
             <!-- Text Input -->
             @if (getControlType(key) === 'text') {
             <igx-input-group type="border">

src/app/properties-panel/properties-panel.component.ts

@@ -6,7 +6,7 @@ import {
     inject,
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FormGroup, FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import {
     PropertyChangeService,
     PropertyPanelConfig,
@@ -25,15 +25,18 @@ import {
     IgxSelectItemComponent,
     IgxDatePickerComponent,
     IgxTimePickerComponent,
-    IgxDateTimeEditorModule
+    IgxDateTimeEditorModule,
+    ISelectionEventArgs
 } from 'igniteui-angular';
+import { setCurrentI18n } from 'igniteui-i18n-core';
 
 @Component({
     selector: 'app-properties-panel',
     standalone: true,
     templateUrl: './properties-panel.component.html',
     styleUrl: './properties-panel.component.scss',
     imports: [
+        FormsModule,
         ReactiveFormsModule,
         CommonModule,
         IgxButtonDirective,
@@ -131,4 +134,8 @@ export class PropertiesPanelComponent {
             ? labels
             : options.map((option) => option.label || option.toString());
     }
+
+    protected updateLocale(event: ISelectionEventArgs) {
+        setCurrentI18n(event.newSelection.value);
+    }
 }

src/app/properties-panel/property-change.service.ts

@@ -13,7 +13,8 @@ export type ControlType =
     'text' |
     'date' |
     'time' |
-    'date-time';
+    'date-time' |
+    'locale';
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type PropertyPanelConfig = {

src/main.ts

@@ -1,17 +1,5 @@
-import { registerLocaleData } from '@angular/common';
-import localeFr from '@angular/common/locales/fr';
-import localeDe from '@angular/common/locales/de';
-import localeJa from '@angular/common/locales/ja';
-import localeBb from '@angular/common/locales/bg';
-import localeZh from '@angular/common/locales/zh';
 import { AppComponent } from './app/app.component';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 
-registerLocaleData(localeFr);
-registerLocaleData(localeDe);
-registerLocaleData(localeJa);
-registerLocaleData(localeBb);
-registerLocaleData(localeZh);
-
 bootstrapApplication(AppComponent, appConfig).catch(err => console.log(err));