Skip to content

Commit a24767e

Browse files
skrustevskrustev
committed
feat(grid): Apply Angular localeID in case it is set as a higher priority than new manager. Update sample
1 parent 468fae0 commit a24767e

File tree

4 files changed

+98
-23
lines changed

4 files changed

+98
-23
lines changed

‎projects/igniteui-angular/src/lib/core/i18n/resources.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import { IBannerResourceStrings } from './banner-resources';
1616
import {
1717
registerI18n,
1818
getCurrentResourceStrings as getCurrentResourceStringsCore,
19-
IResourceStrings as IResourceStringsCore
19+
IResourceStrings as IResourceStringsCore,
20+
setCurrentI18n
2021
} from 'igniteui-i18n-core';
2122

2223
export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICalendarResourceStrings,
@@ -64,3 +65,10 @@ export function getCurrentResourceStrings<T>(defaultEN: T, init = true) {
6465
export function changei18n(resourceStrings: IResourceStrings) {
6566
igxRegisterI18n(resourceStrings);
6667
}
68+
69+
export function initi18n(locale: string) {
70+
if (locale !== 'en-US') {
71+
//Default
72+
setCurrentI18n(locale);
73+
}
74+
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ import { IgxGridFilteringRowComponent } from './filtering/base/grid-filtering-ro
180180
import { DefaultDataCloneStrategy, IDataCloneStrategy } from '../data-operations/data-clone-strategy';
181181
import { IgxGridCellComponent } from './cell.component';
182182
import { IgxGridValidationService } from './grid/grid-validation.service';
183-
import { getCurrentResourceStrings } from '../core/i18n/resources';
183+
import { getCurrentResourceStrings, initi18n } from '../core/i18n/resources';
184184
import { isTree, recreateTree, recreateTreeFromFields } from '../data-operations/expressions-tree-util';
185185
import { getUUID } from './common/random';
186186
import { getCurrentI18n, getI18nManager, ResourceChangeEventArgs } from 'igniteui-i18n-core';
@@ -3495,7 +3495,8 @@ export abstract class IgxGridBaseDirective implements GridType,
34953495
protected platform: PlatformUtil,
34963496
@Optional() @Inject(IgxGridTransaction) protected _diTransactions?: TransactionService<Transaction, State>,
34973497
) {
3498-
this.locale = this.locale || getCurrentI18n() || this.localeId;
3498+
initi18n(localeId);
3499+
this.locale = this.locale || getCurrentI18n();
34993500
this._transactions = this.transactionFactory.create(TRANSACTION_TYPE.None);
35003501
this._transactions.cloneStrategy = this.dataCloneStrategy;
35013502
this.cdr.detach();

‎src/app/grid-localization/grid-localization.sample.html‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
<div class="sample-column">
1+
<div class="sample-row">
2+
<label for="format"></label>
3+
<input igxInput name="format" [(ngModel)]="inputValue">
4+
<button (click)="onButtonClick()">Log custom format</button>
5+
</div>
6+
<div class="sample-row">
27
<div class="grid-wrapper">
3-
<igx-grid #grid [data]="data" [autoGenerate]="false" height="520px" width="100%"
4-
[allowFiltering]="true" [locale]="locale" [primaryKey]="'Type'">
8+
<igx-grid #grid [data]="data" [autoGenerate]="false" height="600px" width="100%"
9+
[allowFiltering]="true"
10+
[primaryKey]="'Type'">
511
<igx-grid-toolbar>
612
<igx-grid-toolbar-title>Grid with Localization</igx-grid-toolbar-title>
713
<igx-select [(ngModel)]="locale" (ngModelChange)="updateLocale()">
@@ -19,6 +25,10 @@
1925
<igx-column field="Buy" header="Buy" [dataType]="'currency'" [groupable]="true" [editable]="true"></igx-column>
2026
<igx-column field="Volume" header="Volume" [dataType]="'number'" [groupable]="true" [editable]="true"></igx-column>
2127
<igx-column field="LastOrderDate" header="Last Order" [dataType]="'date'" [groupable]="true" [editable]="true"></igx-column>
28+
<igx-action-strip #actionstrip>
29+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
30+
<igx-grid-editing-actions [addRow]="true" [editRow]="true" [deleteRow]="true"></igx-grid-editing-actions>
31+
</igx-action-strip>
2232
<igx-paginator></igx-paginator>
2333
</igx-grid>
2434
</div>

‎src/app/grid-localization/grid-localization.sample.ts‎

Lines changed: 73 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { registerLocaleData } from '@angular/common';
3-
import { FormsModule } from '@angular/forms';
1+
import { Component, CUSTOM_ELEMENTS_SCHEMA, OnInit, ViewChild } from '@angular/core';
2+
import { formatDate, registerLocaleData } from '@angular/common';
3+
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
44

55
import localeBG from '@angular/common/locales/bg';
66
import localeEN from '@angular/common/locales/en';
@@ -19,13 +19,42 @@ import {
1919
IgxResourceStringsBG, IgxResourceStringsDE, IgxResourceStringsES, IgxResourceStringsFR, IgxResourceStringsIT,
2020
IgxResourceStringsJA, IgxResourceStringsKO, IgxResourceStringsZHHANS, IgxResourceStringsZHHANT
2121
} from 'igniteui-angular-i18n';
22-
import { IResourceStrings, GridResourceStringsEN, IgxColumnComponent, IgxGridComponent, IgxSelectComponent, IgxSelectItemComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxPaginatorComponent, changei18n } from 'igniteui-angular';
22+
import {
23+
IResourceStrings,
24+
GridResourceStringsEN,
25+
IgxColumnComponent,
26+
IgxGridComponent,
27+
IgxSelectComponent,
28+
IgxSelectItemComponent,
29+
IgxGridToolbarComponent,
30+
IgxGridToolbarTitleComponent,
31+
IgxPaginatorComponent,
32+
changei18n,
33+
IgxGridPinningActionsComponent,
34+
IgxGridEditingActionsComponent,
35+
IgxActionStripComponent
36+
} from 'igniteui-angular';
37+
import { setCurrentI18n, getI18nManager, registerI18n, ResourceStringsEN } from 'igniteui-i18n-core';
38+
import { ResourceStringsBG, ResourceStringsDE, ResourceStringsES, ResourceStringsFR, ResourceStringsIT, ResourceStringsJA, ResourceStringsKO, ResourceStringsZHHANS, ResourceStringsZHHANT } from 'igniteui-i18n-resources';
2339

2440
@Component({
2541
selector: 'app-grid-localization',
2642
styleUrls: ['./grid-localization.sample.scss'],
2743
templateUrl: 'grid-localization.sample.html',
28-
imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxPaginatorComponent]
44+
imports: [
45+
FormsModule,
46+
ReactiveFormsModule,
47+
IgxGridComponent,
48+
IgxColumnComponent,
49+
IgxGridToolbarComponent,
50+
IgxGridToolbarTitleComponent,
51+
IgxSelectComponent,
52+
IgxSelectItemComponent,
53+
IgxPaginatorComponent,
54+
IgxGridPinningActionsComponent,
55+
IgxGridEditingActionsComponent,
56+
IgxActionStripComponent
57+
]
2958
})
3059

3160
export class GridLocalizationSampleComponent implements OnInit {
@@ -37,20 +66,10 @@ export class GridLocalizationSampleComponent implements OnInit {
3766
public selectLocales = ['HI', 'BG', 'EN', 'DE', 'ES', 'FR', 'IT', 'JA', 'KO', 'zh-Hans', 'zh-Hant'];
3867
public cashedLocalizationEN: IResourceStrings;
3968
public partialCustomHindi: IResourceStrings;
69+
public inputValue;
4070

4171
constructor() { }
4272
public ngOnInit(): void {
43-
registerLocaleData(localeBG);
44-
registerLocaleData(localeEN);
45-
registerLocaleData(localeDE);
46-
registerLocaleData(localeES);
47-
registerLocaleData(localeFR);
48-
registerLocaleData(localeIT);
49-
registerLocaleData(localeJA);
50-
registerLocaleData(localeKO);
51-
registerLocaleData(localeHans);
52-
registerLocaleData(localeHant);
53-
registerLocaleData(localeHI);
5473
this.data = DATA;
5574
this.cashedLocalizationEN = Object.assign({}, GridResourceStringsEN);
5675
// Creating a custom locale (HI) for specific grid strings.
@@ -78,11 +97,48 @@ export class GridLocalizationSampleComponent implements OnInit {
7897
];
7998

8099
this.locale = 'EN';
100+
101+
// Old way by Angular
102+
// registerLocaleData(localeBG);
103+
// registerLocaleData(localeEN);
104+
// registerLocaleData(localeDE);
105+
// registerLocaleData(localeES);
106+
// registerLocaleData(localeFR);
107+
// registerLocaleData(localeIT);
108+
// registerLocaleData(localeJA);
109+
// registerLocaleData(localeKO);
110+
// registerLocaleData(localeHans);
111+
// registerLocaleData(localeHant);
112+
// registerLocaleData(localeHI);
113+
114+
// New API
115+
registerI18n(ResourceStringsBG, 'bg');
116+
registerI18n(ResourceStringsEN, 'en');
117+
registerI18n(ResourceStringsDE, 'de');
118+
registerI18n(ResourceStringsES, 'es');
119+
registerI18n(ResourceStringsFR, 'fr');
120+
registerI18n(ResourceStringsIT, 'it');
121+
registerI18n(ResourceStringsJA, 'ja');
122+
registerI18n(ResourceStringsKO, 'ko');
123+
registerI18n(ResourceStringsZHHANS, 'zh-Hans');
124+
registerI18n(ResourceStringsZHHANT, 'zh-Hant');
125+
81126
}
82127

83128
public updateLocale() {
84129
const newLocale = this.locales.find(x => x.type === this.locale).resource;
130+
// Manual assign of resource strings.
85131
//this.grid.resourceStrings = newLocale;
86-
changei18n(newLocale);
132+
133+
// Old API
134+
// changei18n(newLocale);
135+
136+
// New API
137+
setCurrentI18n(this.locale);
138+
}
139+
140+
public onButtonClick() {
141+
console.log("Old: " + formatDate(new Date("10/10/1993"), this.inputValue, this.locale));
142+
console.log("New: " + getI18nManager().formatDateCustomFormat(new Date("10/10/1993"), this.locale, this.inputValue));
87143
}
88144
}

0 commit comments

Comments
 (0)