Angular Material Table set default number of rows

Question

I want to set a number of rows on the table on page load having no data yet. If I click a button for me to display the list of data it will then populate the rows for n number I set.

I already tried adding a default length on the matrow.

Let say ngOnInit() it will display 8 rows and when I click a button to display the data, it would fill up the 8 rows I set and there's still a pagination using mat-paginator.

Is this possible?

Answer 1

Populate using empty data according to the number of initial rows, then load real data when the button is clicked.

Stackblitz: https://stackblitz.com/edit/angular-f3g5vu?file=app%2Ftable-pagination-example.ts