Angular MatPaginator not working : <p>I have 2 components. Both have mat-table and paginators and pagination is working for one component and not working for the other component though the code is similar. Below is my html:</p>

<pre><code>&lt;div class="mat-elevation-z8"&gt;

    &lt;mat-table [dataSource]="dataSource" matSort&gt;

      &lt;ng-container matColumnDef="col1"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Column1 &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let row"&gt; {{row.col1}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;

      &lt;ng-container matColumnDef="col2"&gt;
        &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Column2 &lt;/mat-header-cell&gt;
        &lt;mat-cell *matCellDef="let row"&gt; {{row.col2}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;

      &lt;!-- Different columns goes here --&gt;

      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;
      &lt;/mat-row&gt;
    &lt;/mat-table&gt;

    &lt;mat-paginator #scheduledOrdersPaginator [pageSizeOptions]="[5, 10, 20]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
</code></pre>

<p>And below is my code in component.ts:</p>

<pre><code>dataSource: MatTableDataSource&lt;any&gt;;
displayedColumns = ['col1', 'col2', ... ];
@ViewChild('scheduledOrdersPaginator') paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
ngOnInit(): void {
    // Load data
    this.dataSource = new MatTableDataSource(somearray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}
</code></pre>

<p>Similar code is working for the other component and table is getting rendered with the pagination properly, no clue what's wrong with this code.</p>

<p>Any help would be really appreciated</p>
