fix(crud): update total count after add and delete operations

src/app/grid/grid-crud-sample/crud-sample.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, Component, OnInit, ViewChild, OnDestroy, inject, ChangeDetectionStrategy } from '@angular/core';
 import { GridPagingMode, IGridEditDoneEventArgs, IRowDataEventArgs, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridRow } from 'igniteui-angular/grids/core';
+import { takeUntil } from 'rxjs/operators';
 import { IgxGridComponent } from 'igniteui-angular/grids/grid';
 import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
 import { NoopFilteringStrategy, NoopSortingStrategy } from 'igniteui-angular/core';
@@ -44,13 +45,17 @@ export class CRUDSampleComponent implements OnInit, OnDestroy {
     public ngOnInit(): void {
         this.remoteData$ = this._crudService.data$;
         this._crudService.getData(this.page * this.perPage, this.perPage);
-        this._crudService.getDataLength().subscribe((length) => {
-            this.totalCount = length;
-        });
-        this.remoteData$.subscribe((data: any) => {
-            this.data = data;
-            this.grid.isLoading = false;
-        });
+        this._crudService.totalCount$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(count => {
+                this.totalCount = count;
+            });
+        this.remoteData$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((data: any) => {
+                this.data = data;
+                this.grid.isLoading = false;
+            });
     }
 
     public rowAdded(event: IRowDataEventArgs): void {

src/app/services/crud.service.ts

@@ -7,10 +7,12 @@ import { Invoice, INVOICE_DATA } from '../data/invoiceData';
 @Injectable()
 export class CRUDService {
     private _http = inject(HttpClient);
+    private readonly _totalCount = new BehaviorSubject<number>(0);
 
     public dataCollection: Invoice[];
     public data$: Observable<Invoice[]>;
     private _data: BehaviorSubject<Invoice[]>;
+    public totalCount$ = this._totalCount.asObservable();
 
     constructor() {
         this._data = new BehaviorSubject<Invoice[]>([]);
@@ -19,6 +21,7 @@ export class CRUDService {
             rec['ID'] = 100 + index;
             return rec;
         }).slice(0);
+        this._totalCount.next(this.dataCollection.length);
     }
     public getAllData(): Observable<Invoice[]> {
         setTimeout(() => {
@@ -49,6 +52,7 @@ export class CRUDService {
     public add(rec: Invoice): Observable<Invoice> {
         const data$: Observable<any> = new Observable((observer) => {
             this.dataCollection.push(rec);
+            this._totalCount.next(this.dataCollection.length);
             observer.next(this.dataCollection);
             observer.complete();
         }).pipe(delay(300));
@@ -73,20 +77,11 @@ export class CRUDService {
         const data$: Observable<any> = new Observable((observer) => {
             const ind = this.dataCollection.indexOf(rec);
             const deletedInstance = this.dataCollection.splice(ind, 1)[0];
+            this._totalCount.next(this.dataCollection.length);
             observer.next(deletedInstance);
             observer.complete();
         }).pipe(delay(300));
 
         return data$;
     }
-
-    public getDataLength(): Observable<number> {
-        const data$: Observable<any> = new Observable((observer) => {
-            observer.next(this.dataCollection.length);
-            observer.complete();
-        });
-
-        return data$;
-    }
-
 }