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

Author: dkamburov

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" [igxForOfTotalItemCount]="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) {