feat(list): add list localization #5280

Author: onlyexeption

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

@@ -0,0 +1,9 @@
+export interface IListResourceStrings {
+    igx_list_no_items?: string;
+    igx_list_loading?: string;
+}
+
+export const ListResourceStringsEN: IListResourceStrings = {
+    igx_list_no_items: 'There are no items in the list.',
+    igx_list_loading: 'Loading data from the server...'
+};

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

@@ -4,6 +4,7 @@ import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-
 import { PaginatorResourceStringsEN } from './paginator-resources';
 import { cloneValue } from '../utils';
 import { ICarouselResourceStrings, CarouselResourceStringsEN } from './carousel-resources';
+import { ListResourceStringsEN } from './list-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICarouselResourceStrings  {}
 
@@ -16,6 +17,7 @@ export const CurrentResourceStrings = {
     TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
+    ListResStrings: cloneValue(ListResourceStringsEN),
 };
 
 function updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings ) {

projects/igniteui-angular/src/lib/list/list.common.ts

@@ -1,5 +1,7 @@
 import { Directive, TemplateRef, EventEmitter, QueryList, Optional, Inject } from '@angular/core';
 import { DisplayDensityBase, IDisplayDensityOptions, DisplayDensityToken } from '../core/density';
+import { CurrentResourceStrings } from '../core/i18n/resources';
+import { IListResourceStrings } from '../core/i18n/list-resources';
 
 export interface IListChild {
     index: number;

projects/igniteui-angular/src/lib/list/list.component.html

@@ -2,13 +2,13 @@
 
 <ng-template #defaultEmptyList>
     <article class="message">
-        There are no items in the list.
+        {{resourceStrings.igx_list_no_items}}
     </article>
 </ng-template>
 
 <ng-template #defaultDataLoading>
     <article class="message">
-        Loading data from the server...
+        {{resourceStrings.igx_list_loading}}
     </article>
 </ng-template>
 

projects/igniteui-angular/src/lib/list/list.component.ts

@@ -30,6 +30,8 @@ import {
 } from './list.common';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensity } from '../core/density';
 import { IBaseEventArgs } from '../core/utils';
+import { IListResourceStrings } from '../core/i18n/list-resources';
+import { CurrentResourceStrings } from '../core/i18n/resources';
 
 let NEXT_ID = 0;
 
@@ -148,6 +150,23 @@ export class IgxListLineSubTitleDirective {
     providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }]
 })
 export class IgxListComponent extends IgxListBaseDirective {
+    /**
+     * Sets the resource strings.
+     * By default it uses EN resources.
+     */
+   @Input()
+   set resourceStrings(value: IListResourceStrings) {
+       this._resourceStrings = Object.assign({}, this._resourceStrings, value);
+   }
+
+    /**
+     * Returns the resource strings.
+     */
+    get resourceStrings(): IListResourceStrings {
+        return this._resourceStrings;
+    }
+
+    private _resourceStrings = CurrentResourceStrings.ListResStrings;
 
     constructor(public element: ElementRef,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {