Angular Material Table: Detect what rows (items) are currently being displayed
One way that you can get the rows displayed is using the subscribe of the paginator and use the pageIndex to get the data from the dataSource.
allTasks = new MatTableDataSource<Task>([]);
@ViewChild(MatTable) table: MatTable<any>;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sorter: MatSort;
ngAfterViewInit() {
this.allTasks.paginator = this.paginator;
this.allTasks.sort = this.sorter;
this.allTasks.paginator.page.subscribe((pageEvent: PageEvent) => {
const startIndex = pageEvent.pageIndex * pageEvent.pageSize;
const endIndex = startIndex + pageEvent.pageSize;
const itemsShowed = this.allTasks.filteredData.slice(startIndex, endIndex);
console.log(itemsShowed);
});
}
While Daniel solution works perfectly, I found something simpler.
this.allTasks.connect().value
will give you the rows displayed on the screen for the current page.
If you want all the filtered row (that might be displayed on several pages), you can also use:
this.allTasks.filteredData