diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c3d2d4d104b..76d72f327fb 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -476,6 +476,11 @@ export class AppComponent implements OnInit {
icon: 'list',
name: 'List Performance'
},
+ {
+ link: '/localization',
+ icon: 'translate',
+ name: 'Localization'
+ },
{
link: '/monthPicker',
icon: 'event',
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 5234d396dc1..118db2b8a4f 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -128,6 +128,7 @@ import { TreeShowcaseSampleComponent } from './tree-showcase/tree-showcase.sampl
import { GridColumnTypesSampleComponent } from './grid-column-types/grid-column-types.sample';
import { AccordionSampleComponent } from './accordion/accordion.sample';
import { GridLocalizationSampleComponent } from './grid-localization/grid-localization.sample';
+import { LocalizationSampleComponent } from './localization/localization.sample';
import { TreeGridGroupBySampleComponent } from './tree-grid-groupby/tree-grid-groupby.sample';
import { PaginationSampleComponent } from './pagination/pagination.component';
import { GridCellAPISampleComponent } from './grid-cell-api/grid-cell-api.sample';
@@ -714,5 +715,9 @@ export const appRoutes: Routes = [
{
path: 'labelDirective',
component: LabelSampleComponent
+ },
+ {
+ path: 'localization',
+ component: LocalizationSampleComponent
}
];
diff --git a/src/app/localization/localization.sample.html b/src/app/localization/localization.sample.html
new file mode 100644
index 00000000000..19db9e0b628
--- /dev/null
+++ b/src/app/localization/localization.sample.html
@@ -0,0 +1,337 @@
+
+
+ @for (locale of selectLocales; track locale) {
+ {{ locale }}
+ }
+
+
+
+
+ You are currently offline.
+
+
+
+
+
+
+
+ @for (slide of slides; track slide) {
+
+
+
![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
![]()
+
+
+
+