Custom [pageSizeOptions] in Angular Material table

Question

I need to change the size of my Angular material table (number of rows) in a dynamic way.

So for example, if my code looks like this:

   <div>
      <p (click)="updateRows(1)">1</p>
      <p (click)="updateRows(2)">2</p>
      <p (click)="updateRows(3)">3</p>
   </div>
   <div>
       My table ... 
   </div>

I want that by click on 1 it will show only one row, by click on 2 - two, etc.

I was thinking to splice the dataSource array every time in updateRows() but I'm not sure it's the best option.

Is there a better way to do it, using [pageSizeOptions] / <mat-paginator> ?

The thing is that I don't want to show the pagination, nor the small drop down with the number of rows to show. I need to customize it like in the html above, and only by click the labels in top upper div to change the number of display rows in the table. Also, I don't want to use pagination, only to change the number of rows.

Thanks.

Answer 1

等待大神解答