trying to use angular material paginator without a table

Question

---

I started with the exact example "Data table with sorting, pagination, and filtering." here https://material.angular.io/components/table/examples It works fine. But now I'd like to use the paginator without the table, so I replaced in html file "< mat-table ... < /mat-table>" simply by :

<div *ngFor="let row of dataSource.connect() | async" >
{{ row.id }} {{ row.name }} {{ row.progress }} {{ row.color }} <br>
</div>

But it does not work fine as it appears that :

• connect() is run many times at startup
• just hovering paginator arrow makes it run many times again
• inputing one letter in the filter do the same

I guess this is not the right way.

At the end I would like to reuse same method to display cards, with filtering and paginator.

TIA for any help.

JP

---

I put the code here : https://angular-6q44a4.stackblitz.io I added some console.log to show what happens (not on stackblitz) but here is an example :

Just hovering the arrow then click, many renderedData seen.

Whereas same code but with a table, it works as expected :

---

I recreated from zero one paginator with mini-fab buttons, inspired with some code from http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google , added several filters and it works fine :)

Answer 1

You probably already managed to work around that issue but, since I was looking for that, and probably others will too.

I was facing the same problem, and manage to do it simply by doing the connect in on ngOnInit and using another observable in the view (I only put the thing i changed):

export class TableOverviewExample implements OnInit {
  obs: Observable<any>;
  ...

  ngOnInit(): void {
    ...
    this.obs = this.dataSource.connect();
  }
}

and in the View:

<div *ngFor="let row of obs | async" >

You will probably have to manually disconect the datasource, I have not validated that... I just did in:

ngOnDestroy(): void {
  if (this.dataSource) { this.dataSource.disconnect(); }
}