IgniteUI · dkamburov · Dec 13, 2025 · Jul 8, 2025 · Jul 8, 2025 · Jul 25, 2025
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -94,20 +94,31 @@ There are several ways to localize components' string resources:
     1.1. Localize a given instance of component - each component which supports localization has input property `resourceStrings`. Setting a newly instantiated object to this property will localize only that given component's instance.
     1.2. Localize all resources for a component type - each component which supports localization has input property `resourceStrings`. To localize all instances of a given component in the application the following steps should be performed - get the value of the input property `resourceStrings` of the component to be localized; do not create a new instance but replace the existing strings within the object. By default all components of a given type in an application share one instance of the resource strings. Replacing a value in that instance affects all components of that type in the application.
     1.3. Localize all resources for all components - use global method `getCurrentResourceStrings` to get an object containing current resource strings for all components. To provide localized resources just pass an object of type `IResourceStrings` to the global method `changei18n`.
+    1.4 As of 21.1.x the localization has new implementation and you can use the new API `registerI18n` to register resource string for a component or all components for the whole app, as well as which locale it corresponds to. To localize a single component you will need to get is corresponding resource string keys using one of the available resources and provide only those keys.
 
 2. Using npm package:
 We've created new repository which will hold the resource strings for languages different than English:
 https://github.com/IgniteUI/igniteui-angular-i18n 
 
-**NOTE** The localization repo has been moved to live inside the `igniteui-angular` repository under `./projects/igniteui-angular-i18n`  
+**NOTE** The localization repo has been moved to live inside the `igniteui-angular` repository under `./projects/igniteui-angular-i18n`
+**NOTE** As of 21.1.x the localization resource strings have been moved to the [`igniteui-i18n`](https://github.com/IgniteUI/igniteui-i18n) repository under `projects/igniteui-i18n-resources`.
 
 A npm package should be published each time we release new version of Ignite UI for Angular. Its version should correspond to the version of the igniteui-angular npm package.
 One could localize an application by importing the corresponding localized resource strings from the localization package (`igniteui-angular-i18n`) and use the methods described in the previous bullet to localize the whole application or part of it.
-Example:
+
+**Example:**
+
 Inside app.module you can perform:
-_import { IgxResouceStringsJA } from ‘igniteui-angular-i18n’;_
-And then:
-_Changei18n(IgxResouceStringsJA);_
+```ts
+import { IgxResouceStringsJA } from ‘igniteui-angular-i18n’;
+changei18n(IgxResouceStringsJA);
+```
+
+**Example new API:**
+```ts
+import { ResouceStringsJA } from ‘igniteui-i18n-resources’;
+registerI18n(IgxResouceStringsJA, 'ja');
+```
 
 ### Resource strings keys naming convention
 Each key in the `IResourceStrings` (and `IGridResourceStrings`, `ITimePickerResourceStrings`, etc.) is prefixed with components' selector and followed by the resource string key. Having components' selectors as prefixes allows us to have same resource strings keys for more than one component.

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 21.1.0
+
+# Localization(i18n)
+
+- `IgxActionStrip`, `IgxBanner`, `IgxCalendar`, `IgxCarousel`, `IgxChip`, `IgxCombo`, `IgxDatePicker`, `IgxDateRangePicker`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`, `IgxInputs`, `IgxList`, `IgxPaginator`, `IgxQueryBuilder`, `IgxTimePicker`, `IgxTree`
+  - New `Intl` implementation for all currently supported components that format and render data like dates and numbers.
+  - New localization implementation for the currently supported languages for all components that have resource strings in the currently supported languages.
+  - New public localization API and package named `igniteui-i18n-resources` containing the new resources that are used in conjunction.
+  - Added API to toggle off Angular's default formatting completely in favor of the new `Intl` implementation. Otherwise `Intl` will be used when a locale is not defined for Angular to use.
+  - Old resources and API should still remain working and not experience any change in behavior, despite internally using the new localization as well.
+
 ## 21.0.0
 
 ### New Features
@@ -109,7 +120,6 @@ See the [Angular Package Format documentation](https://angular.io/guide/angular-
 ## 20.1.0
 
 ### New Features
-
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
 

diff --git a/angular.json b/angular.json
@@ -328,7 +328,7 @@
               ],
               "outputHashing": "none",
               "optimization": true,
-              "externalDependencies": ["lit"]
+              "externalDependencies": ["lit", "igniteui-i18n-core"]
             },
             "development": {
               "optimization": false,

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "dompurify": "^3.3.0",
     "express": "^5.2.1",
     "fflate": "^0.8.1",
+    "igniteui-i18n-core": "^1.0.1",
     "igniteui-theming": "^24.0.0",
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^3.0.4",
@@ -125,6 +126,7 @@
     "hammerjs": "^2.0.8",
     "ig-typedoc-theme": "^7.0.1",
     "igniteui-dockmanager": "^1.17.0",
+    "igniteui-i18n-resources": "1.0.1",
     "igniteui-sassdoc-theme": "^2.1.0",
     "igniteui-webcomponents": "^6.3.1",
     "jasmine": "^5.6.0",

diff --git a/projects/igniteui-angular-elements/esbuild.mjs b/projects/igniteui-angular-elements/esbuild.mjs
@@ -8,7 +8,7 @@ const config = {
     minify: false, // temporary disabled due to Webpack issues https://github.com/webpack/webpack/issues/16262
     outfile: `${ROOT}/elements.js`,
     format: 'esm',
-    external: ['lit'],
+    external: ['lit', 'igniteui-i18n-core'],
     target: 'es2022',
     metafile: true,
     treeShaking: true

diff --git a/projects/igniteui-angular-elements/src/analyzer/elements.config.ts b/projects/igniteui-angular-elements/src/analyzer/elements.config.ts
@@ -5,6 +5,8 @@ import {
   IgxPivotGridComponent,
 } from "../../../igniteui-angular/grids/pivot-grid";
 import { IgxTreeGridComponent } from "../../../igniteui-angular/grids/tree-grid";
+import { IgxActionStripComponent } from "../../../igniteui-angular/action-strip/src/action-strip/action-strip.component";
+import { IgxActionStripToken } from "../../../igniteui-angular/core/src/grid-column-actions/token";
 import { IgxPaginatorComponent } from "../../../igniteui-angular/paginator/src/paginator/paginator.component";
 import { IgxPaginatorToken } from "../../../igniteui-angular/paginator/src/paginator/token";
 import { IgxColumnGroupComponent } from "../../../igniteui-angular/grids/core/src/columns/column-group.component";
@@ -22,8 +24,6 @@ import { IgxGridToolbarExporterComponent } from "../../../igniteui-angular/grids
 import { IgxGridToolbarHidingComponent } from "../../../igniteui-angular/grids/core/src/toolbar/grid-toolbar-hiding.component";
 import { IgxGridToolbarPinningComponent } from "../../../igniteui-angular/grids/core/src/toolbar/grid-toolbar-pinning.component";
 import { IgxRowIslandComponent } from "../../../igniteui-angular/grids/hierarchical-grid/src/row-island.component";
-import { IgxActionStripComponent } from "../../../igniteui-angular/action-strip/src/action-strip/action-strip.component";
-import { IgxActionStripToken } from "../../../igniteui-angular/core/src/grid-column-actions/token";
 import { IgxGridStateComponent } from "../lib/state.component";
 
 export const registerComponents = [

diff --git a/projects/igniteui-angular-elements/src/public_api.ts b/projects/igniteui-angular-elements/src/public_api.ts
@@ -1,3 +1,4 @@
+import { registerI18n, setCurrentI18n } from 'igniteui-i18n-core';
 import { ByLevelTreeGridMergeStrategy, ColumnPinningPosition, DefaultMergeStrategy, DefaultTreeGridMergeStrategy, FilteringExpressionsTree, FilteringExpressionsTreeType, FilteringLogic, HorizontalAlignment, IgxBooleanFilteringOperand, IgxDateFilteringOperand, IgxDateTimeFilteringOperand, IgxFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand, IgxTimeFilteringOperand, NoopFilteringStrategy, NoopSortingStrategy, SortingDirection, VerticalAlignment } from 'igniteui-angular/core';
 import { DropPosition, GridPagingMode, IgxDateSummaryOperand, IgxNumberSummaryOperand, IgxPivotAggregate, IgxPivotDateAggregate, IgxPivotDateDimension, IgxPivotNumericAggregate, IgxPivotTimeAggregate, IgxSummaryOperand, IgxTimeSummaryOperand, NoopPivotDimensionsStrategy, PivotDimensionType, RowPinningPosition } from 'igniteui-angular/grids/core';
 
@@ -44,4 +45,8 @@ export {
     // overlay position settings (used in grids, paginator, toolbar)
     HorizontalAlignment,
     VerticalAlignment,
+
+    // i18n
+    registerI18n,
+    setCurrentI18n,
 }
diff --git a/projects/igniteui-angular-elements/src/utils/injector-ref.ts b/projects/igniteui-angular-elements/src/utils/injector-ref.ts
@@ -2,7 +2,7 @@ import { ClassProvider, createEnvironmentInjector, EnvironmentInjector, getPlatf
 import { BrowserModule, platformBrowser } from '@angular/platform-browser';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { IgxIconBroadcastService } from '../lib/icon.broadcast.service';
-import { ELEMENTS_TOKEN } from 'igniteui-angular/core';
+import { ELEMENTS_TOKEN , provideIgniteIntl} from 'igniteui-angular/core';
 
 /**
  * Top-level await (TLA) both requires higher ES target and currently has only partial support in ES build
@@ -36,7 +36,8 @@ const injector = createEnvironmentInjector([
     // Elements specific:
     provideAnimations(),
     { provide: ELEMENTS_TOKEN, useValue: true },
-    IgxIconBroadcastService
+    IgxIconBroadcastService,
+    provideIgniteIntl()
 ], platformInjector as EnvironmentInjector);
 
 export { injector };
diff --git a/projects/igniteui-angular-i18n/package.json b/projects/igniteui-angular-i18n/package.json
@@ -22,5 +22,9 @@
   "bugs": {
     "url": "https://github.com/IgniteUI/igniteui-angular/issues"
   },
-  "homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme"
+  "homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme",
+  "dependencies": {
+    "igniteui-i18n-core": "^1.0.1",
+    "igniteui-i18n-resources": "^1.0.1"
+  }
 }
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/action-strip-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/action-strip-resources.ts
@@ -1,9 +1,7 @@
-import { IActionStripResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { ActionStripResourceStringsBG as AActionStripResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxActionStrip
  */
-export const ActionStripResourceStringsBG = {
-    igx_action_strip_button_more_title: 'Още'
-} satisfies MakeRequired<IActionStripResourceStrings>;
+export const ActionStripResourceStringsBG = prefixResource(IGX_PREFIX, AActionStripResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/banner-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/banner-resources.ts
@@ -1,9 +1,7 @@
-import { IBannerResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { BannerResourceStringsBG as ABannerResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxBanner
  */
-export const BannerResourceStringsBG = {
-    igx_banner_button_dismiss: 'Отхвърляне'
-} satisfies MakeRequired<IBannerResourceStrings>;
+export const BannerResourceStringsBG = prefixResource(IGX_PREFIX, ABannerResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/calendar-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/calendar-resources.ts
@@ -1,30 +1,7 @@
-import { ICalendarResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { CalendarResourceStringsBG as ACalendarResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxCalendar
  */
-export const CalendarResourceStringsBG = {
-    igx_calendar_previous_month: 'Предходен месец',
-    igx_calendar_next_month: 'Следващ месец',
-    igx_calendar_previous_year: 'Предходна година',
-    igx_calendar_next_year: 'Следваща година',
-    igx_calendar_previous_years: 'Предходни {0} години',
-    igx_calendar_next_years: 'Следващи {0} години',
-    igx_calendar_select_date: 'Избор на дата',
-    igx_calendar_select_month: 'Избор на месец',
-    igx_calendar_select_year: 'Избор на година',
-    igx_calendar_range_start: 'Начало на диапазона',
-    igx_calendar_range_end: 'Край на диапазона',
-    igx_calendar_range_label_start: 'Начало',
-    igx_calendar_range_label_end: 'Край',
-    igx_calendar_range_placeholder: 'Избери диапазон',
-    igx_calendar_selected_month_is: 'Избраният месец е ',
-    igx_calendar_first_picker_of: 'Първия селектор от {0} започва от',
-    igx_calendar_multi_selection: 'Календар с множествен избор с {0} избирачи на дати',
-    igx_calendar_range_selection: 'Календар с избор на диапазон с {0} избирачи на дати',
-    igx_calendar_single_selection: 'Календар с {0} избирачи на дати',
-    igx_calendar_singular_multi_selection: 'Календар с множествен избор',
-    igx_calendar_singular_range_selection: 'Календар с избор на диапазон',
-    igx_calendar_singular_single_selection: 'Календар',
-} satisfies MakeRequired<ICalendarResourceStrings>;
+export const CalendarResourceStringsBG = prefixResource(IGX_PREFIX, ACalendarResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/carousel-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/carousel-resources.ts
@@ -1,12 +1,7 @@
-import { ICarouselResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { CarouselResourceStringsBG as ACarouselResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxCarousel
  */
-export const CarouselResourceStringsBG = {
-    igx_carousel_of: 'от',
-    igx_carousel_slide: 'слайд',
-    igx_carousel_previous_slide: 'предишен слайд',
-    igx_carousel_next_slide: 'следващ слайд'
-} satisfies MakeRequired<ICarouselResourceStrings>;
+export const CarouselResourceStringsBG = prefixResource(IGX_PREFIX, ACarouselResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/chip-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/chip-resources.ts
@@ -1,10 +1,7 @@
-import { IChipResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { ChipResourceStringsBG as AChipResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxChip
  */
-export const ChipResourceStringsBG = {
-    igx_chip_remove: 'Премахване на чипa',
-    igx_chip_select: 'Избор на чип'
-} satisfies MakeRequired<IChipResourceStrings>;
+export const ChipResourceStringsBG = prefixResource(IGX_PREFIX, AChipResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts
@@ -1,14 +1,7 @@
-import { IComboResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { ComboResourceStringsBG as AComboResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxCombo
  */
-export const ComboResourceStringsBG = {
-    igx_combo_empty_message: 'Списъкът е празен',
-    igx_combo_filter_search_placeholder: 'Въведете термин за търсене',
-    igx_combo_addCustomValues_placeholder: 'Добавяне на елемент',
-    igx_combo_clearItems_placeholder: 'Изчистване на избора',
-    igx_combo_aria_label_options: 'Има избрани опции',
-    igx_combo_aria_label_no_options: 'Няма избрани опции'
-} satisfies MakeRequired<IComboResourceStrings>;
+export const ComboResourceStringsBG = prefixResource(IGX_PREFIX, AComboResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/date-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/date-picker-resources.ts
@@ -1,10 +1,7 @@
-import { IDatePickerResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { DatePickerResourceStringsBG as ADatePickerResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxDatePicker
  */
-export const DatePickerResourceStringsBG = {
-    igx_date_picker_change_date: 'Промяна на датата',
-    igx_date_picker_choose_date: 'Избор на дата'
-} satisfies MakeRequired<IDatePickerResourceStrings>;
+export const DatePickerResourceStringsBG = prefixResource(IGX_PREFIX, ADatePickerResourceStrings);
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/date-range-picker-resources.ts
@@ -1,15 +1,7 @@
-import { IDateRangePickerResourceStrings } from 'igniteui-angular/core';
+import { IGX_PREFIX, prefixResource } from 'igniteui-i18n-core';
+import { DateRangePickerResourceStringsBG as ADateRangePickerResourceStrings } from 'igniteui-i18n-resources';
 
-// only use `satisfies` operator so export is typed by its schema
 /**
  * Bulgarian resource strings for IgxDateRangePicker
  */
-export const DateRangePickerResourceStringsBG = {
-    igx_date_range_picker_date_separator: 'до',
-    igx_date_range_picker_done_button: 'Завърши',
-    igx_date_range_picker_cancel_button: 'Отмени',
-    igx_date_range_picker_last7Days: 'Последните 7 дни',
-    igx_date_range_picker_currentMonth: 'Текущ месец',
-    igx_date_range_picker_last30Days: 'Последните 30 дни',
-    igx_date_range_picker_yearToDate: 'От началото на годината'
-} satisfies MakeRequired<IDateRangePickerResourceStrings>;
+export const DateRangePickerResourceStringsBG = prefixResource(IGX_PREFIX, ADateRangePickerResourceStrings);