I am Using Angular Mat Table to populate the data from database everything is working fine but the only issue is if some record in my database is updated,mat table does not update the view,i have to refresh the page in order to view the changes in the record.I want A real time update using mat table is it possible?
Below Given is my code
dataSource: macDataSource;
this.dataSource = new macDataSource(this.MacService);
this.dataSource.loadMacs('', 'asc', 0, 10);
loadMacPage()
{
this.dataSource.loadMacs(this.search_sims.nativeElement.value, this.sort.direction, this.paginator.pageIndex, this.paginator.pageSize);
}
ngAfterViewInit()
{
fromEvent(this.search_sims.nativeElement, 'keyup').pipe(tap(async () => {
this.paginator.pageIndex = 0;
this.loadMacPage();
})).subscribe();
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page).pipe(tap(() => this.loadMacPage())).subscribe();
this.ngx.stop();
}
export class macDataSource extends DataSource<MacModel[]>
{
private macSubject = new BehaviorSubject<MacModel[]>([]);
private loadingSubject = new BehaviorSubject<boolean>(false);
public loading$ = this.loadingSubject.asObservable();
public macLength: any;
public macData: any;
constructor(private macService: MacService) {
super();
}
connect(collectionViewer: CollectionViewer): Observable<any> {
return this.macSubject.asObservable();
}
disconnect(collectionViewer: CollectionViewer): void {
this.macSubject.complete();
this.loadingSubject.complete();
}
loadMacs(filter = '', sortDirection = 'asc', pageIndex = 0, pageSize = 10) {
this.loadingSubject.next(true);
this.macService.getAllmacs(filter, sortDirection, pageIndex, pageSize).pipe(catchError(() => of([])), finalize(() => this.loadingSubject.next(false)))
.subscribe(macs => { this.macSubject.next(macs); this.macLength = macs.length; this.macData = macs; this.loadingSubject.next(macs) });
}
getLength(): String {
return this.macLength;
}
}