Merge pull request #6516 from IgniteUI/dkamburov/expose-totalItemCount

feat(igxFor): Add input igxForOfTotalItemCount to be settable in template

Author: ChronosSF

CHANGELOG.md

@@ -126,6 +126,13 @@ All notable changes for each version of this project will be documented in this
     ```
     - RTL support
 
+- `IgxForOf`
+    - `IgxForTotalItemCount` input is added for the cases when the data is from remote services. This will allow setting the count of the items through the template. And gives the opportunity for the developers to use AsyncPipe for this option:
+    ```html
+    <ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
+        [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>
+    ```
+
 ## 8.2.6
 
 ### New Features

projects/igniteui-angular/src/lib/directives/for-of/README.md

@@ -68,6 +68,7 @@ When the contents of the iterator changes, `igxForOf` makes the corresponding ch
 | igxForScrollContainer  | string          | Only the strings `vertical` and `horizontal` are valid and specify the scroll orientation                                  |
 | igxForContainerSize    | string          | The px-affixed size of the container along the axis of scrolling                                                           |
 | igxForScrollContainer  | IgxForOf        | Optionally pass the parent `igxForOf` instance to create a virtual template scrolling both horizontally and vertically     |
+| igxForTotalItemCount   | number          | The total count of the virtual data items, when using remote service. This is exposed to allow setting the count of the items through the template |
 
 ### Outputs
 

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts

@@ -1075,6 +1075,58 @@ describe('IgxForOf directive -', () => {
             }
         });
     });
+
+    describe('remote virtual component with specified igxForTotalItemCount', () => {
+        configureTestSuite();
+        let fix: ComponentFixture<RemoteVirtCountComponent>;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    TestIgxForOfDirective,
+                    RemoteVirtCountComponent
+                ],
+                imports: [IgxForOfModule]
+            }).compileComponents();
+        }));
+
+        beforeEach(() => {
+            fix = TestBed.createComponent(RemoteVirtCountComponent);
+            fix.componentRef.hostView.detectChanges();
+            fix.detectChanges();
+
+            displayContainer = fix.nativeElement.querySelector('igx-display-container');
+            verticalScroller = fix.nativeElement.querySelector('igx-virtual-helper');
+        });
+
+        it('should apply remote virtualization correctly', async () => {
+            // verify data is loaded
+            let rowsRendered = displayContainer.children;
+            let data = fix.componentInstance.data.source.getValue();
+            for (let i = 0; i < rowsRendered.length; i++) {
+                expect(rowsRendered[i].textContent.trim())
+                    .toBe(data[i].toString());
+            }
+
+            // scroll down
+            expect(() => {
+                verticalScroller.scrollTop = 10000;
+                fix.detectChanges();
+                fix.componentRef.hostView.detectChanges();
+            }).not.toThrow();
+
+            await wait();
+
+            // verify data is loaded
+            rowsRendered = displayContainer.children;
+            data = fix.componentInstance.data.source.getValue();
+            for (let i = fix.componentInstance.parentVirtDir.state.startIndex; i < rowsRendered.length; i++) {
+                expect(rowsRendered[i].textContent.trim())
+                    .toBe(data[i].toString());
+            }
+        });
+    });
+
     describe('no width and height component', () => {
         configureTestSuite();
         let fix: ComponentFixture<NoWidthAndHeightComponent>;
@@ -1518,10 +1570,15 @@ export class LocalService {
     private _records: BehaviorSubject<any[]>;
     private dataStore: any[];
 
+    public count: Observable<number>;
+    private _count: BehaviorSubject<number>;
+
     constructor() {
         this.dataStore = [];
         this._records = new BehaviorSubject([]);
         this.records = this._records.asObservable();
+        this._count = new BehaviorSubject(null);
+        this.count = this._count.asObservable();
     }
 
     public getData(data?: IForOfState, cb?: (any) => void): any {
@@ -1534,6 +1591,11 @@ export class LocalService {
         }
     }
 
+    public getCount() {
+        const count = 1000;
+        this._count.next(count);
+    }
+
     public generateData(start, end) {
         const dummyData = [];
         for (let i = start; i < end; i++) {
@@ -1588,6 +1650,51 @@ export class RemoteVirtualizationComponent implements OnInit, AfterViewInit {
     }
 }
 
+@Component({
+    template: `
+        <div #container [style.width]='width' [style.height]='height'>
+            <ng-template #scrollContainer let-rowData [igxForOf]="data | async" igxForTest
+                [igxForTotalItemCount]="count | async"
+                [igxForContainerSize]='height'
+                [igxForItemSize]='"50px"'
+                (onChunkPreload)="dataLoading($event)">
+                <div [style.display]="'flex'" [style.height]="'50px'">
+                    {{rowData}}
+                </div>
+            </ng-template>
+        </div>
+    `,
+    providers: [LocalService]
+})
+export class RemoteVirtCountComponent implements OnInit, AfterViewInit {
+    public height = '500px';
+    public data;
+    public count: Observable<number>;
+
+    @ViewChild('scrollContainer', { read: TestIgxForOfDirective, static: true })
+    public parentVirtDir: TestIgxForOfDirective<any>;
+
+    @ViewChild('container', { read: ViewContainerRef, static: true })
+    public container: ViewContainerRef;
+
+    constructor(private localService: LocalService) { }
+    public ngOnInit(): void {
+        this.data = this.localService.records;
+        this.count = this.localService.count;
+    }
+
+    public ngAfterViewInit() {
+        this.localService.getCount();
+        this.localService.getData(this.parentVirtDir.state);
+    }
+
+    dataLoading(evt) {
+        this.localService.getData(evt, () => {
+            this.parentVirtDir.cdr.detectChanges();
+        });
+    }
+}
+
 @Component({
     template: `
     <div class="container">

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -141,6 +141,21 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
     @Input()
     public igxForItemSize: any;
 
+    /**
+     * The total count of the virtual data items, when using remote service.
+     * Similar to the property totalItemCount, but this will allow setting the data count into the template.
+     * ```html
+     * <ng-template igxFor let-item [igxForOf]="data | async" [igxForTotalItemCount]="count | async"
+     *  [igxForContainerSize]="'500px'" [igxForItemSize]="'50px'"></ng-template>
+     * ```
+     */
+    @Input()
+    get igxForTotalItemCount(): number {
+        return this.totalItemCount;
+    }
+    set igxForTotalItemCount(value: number) {
+        this.totalItemCount = value;
+    }
     /**
      * @hidden
      */

src/app/shared/remote.service.ts

@@ -6,6 +6,8 @@ import { HttpClient } from '@angular/common/http';
 @Injectable()
 export class RemoteService {
 
+    totalCount: Observable<number>;
+    _totalCount: BehaviorSubject<number>;
     remoteData: Observable<any[]>;
     _remoteData: BehaviorSubject<any[]>;
     url = `https://services.odata.org/V4/Northwind/Northwind.svc/Products`;
@@ -14,6 +16,8 @@ export class RemoteService {
     constructor(private http: HttpClient) {
         this._remoteData = new BehaviorSubject([]);
         this.remoteData = this._remoteData.asObservable();
+        this._totalCount = new BehaviorSubject(null);
+        this.totalCount = this._totalCount.asObservable();
     }
 
     nullData() {
@@ -31,6 +35,7 @@ export class RemoteService {
         )
         .subscribe(d => {
             this._remoteData.next(d['value']);
+            this._totalCount.next(d['@odata.count']);
             if (cb) {
                 cb(d);
             }

src/app/virtual-for-directive/virtual-for.sample.html

@@ -80,6 +80,7 @@
             [igxForScrollOrientation]="'vertical'"
             [igxForContainerSize]='"500px"'
             [igxForItemSize]='"50px"'
+            [igxForTotalItemCount]="totalCount | async"
             let-rowIndex="index" #virtDirRemote>
             <div style='height:50px;'>Index: {{rowIndex}}, ID: {{item.ProductID}}, Name : {{item.ProductName}}</div>
             </ng-template>

src/app/virtual-for-directive/virtual-for.sample.ts

@@ -13,6 +13,7 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
     search1: string;
     data = [];
     remoteData: any;
+    totalCount: any;
     options = {};
     prevRequest: any;
     itemSize = '100px';
@@ -45,6 +46,7 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
 
     ngOnInit(): void {
         this.remoteData = this.remoteService.remoteData;
+        this.totalCount = this.remoteService.totalCount;
         const data = [{
             key: 1,
             avatar: 'assets/images/avatar/1.jpg',
@@ -136,7 +138,7 @@ export class VirtualForSampleComponent implements OnInit, AfterViewInit {
 
     ngAfterViewInit() {
         this.remoteService.getData(this.virtDirRemote.state, (data) => {
-            this.virtDirRemote.totalItemCount = data['@odata.count'];
+            //this.virtDirRemote.totalItemCount = data['@odata.count'];
         });
     }
     chunkLoading(evt) {