Merge pull request #3610 from IgniteUI/gedinakova/fix-3602-master

Allow for showing the loading template even when list items are present. #3608

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

@@ -12,7 +12,7 @@
     </article>
 </ng-template>
 
-<ng-container *ngIf="!children || children.length === 0">
+<ng-container *ngIf="!children || children.length === 0 || isLoading">
     <ng-container *ngTemplateOutlet="template; context: context">
     </ng-container>
 </ng-container>

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

@@ -284,6 +284,25 @@ describe('List', () => {
         expect(noItemsParagraphEl.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
     });
 
+    it('Should show loading template when isLoading=\'true\' even when there are children.', () => {
+        const fixture = TestBed.createComponent(ListWithHeaderComponent);
+        const list = fixture.componentInstance.list;
+        list.isLoading = true;
+        const listLoadingItemsMessage = 'Loading data from the server...';
+
+        fixture.detectChanges();
+
+        verifyItemsCount(list, 3);
+
+        const noItemsParagraphEl = fixture.debugElement.query(By.css('p'));
+        expect(noItemsParagraphEl.nativeElement.textContent.trim()).toBe(listLoadingItemsMessage);
+
+        list.isLoading = false;
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('p'))).toBeFalsy();
+    });
+
     it('Should have custom loading template.', () => {
         const fixture = TestBed.createComponent(ListCustomLoadingComponent);
         const list = fixture.componentInstance.list;