MatPaginator not working in dynamically generated table.

Question

I am generating data Dynamically, and displaying it in Data Table, but I`m unable to link MatPaginator with the data table. Data is getting displayed in the table. Following is the sample code snippet (also attaching it ):

  sCollectionList = null;
  dataSource = new MatTableDataSource<object>(this.sCollectionList);
  displayedColumns: string[] = [];

  // SCollectionService Holds my custom HTTP methods //
  constructor(private stColServ: SCollectionService) {
  }


// Calling it when a Button from UI is clicked //
  submitFilter() {

    // stFilter is a valid objet which is getting passed to my custom post request// 
    this.stColServ.stationFilter(this.stFilter).subscribe(
      data => {
      this.sCollectionList = data;

      this.displayedColumns = ['System Data' , 'Product Identifer' , 'Collected Date' , 'No Stations ?' , 'No Smnp ?', 'Export'];
this.dataSource.data = this.sCollectionList;

//      this.streamOfDataUpdates.subscribe(newData => this.dataSource.data = this.sCollectionList);
      this.dataSource.paginator = this.paginator;
      },
    );

  }


  @ViewChild(MatPaginator) paginator: MatPaginator;

  /**
   * Set the paginator after the view init since this component will
   * be able to query its view for the initialized paginator.
   */
 ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
  }

I am Able to see the paginator on the UI, but it is totally unresponsive. Following is my sample HTML MatTable code, which displays data in the table:

<div style="margin-left: 30px;" class="example-container mat-elevation-z8 col-md-6 col-md-offset-3">

            <mat-table #table [dataSource]="dataSource">
            <ng-container matColumnDef="System Data"> 
            <mat-header-cell fxFlex="200px"
                *matHeaderCellDef> System Data </mat-header-cell>
            <mat-cell
                *matCellDef="let station"> <textarea readonly rows="8"
                wrap='off' show-tail> {{station['collectedData']}}</textarea> </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="Product Identifer"> <mat-header-cell
                *matHeaderCellDef>Product Identifer</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.productIdentifier}}
            </mat-cell> </ng-container> 
            <ng-container matColumnDef="Collected Date"> <mat-header-cell
                *matHeaderCellDef>Collected Date</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.collectionDate}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="No Stations ?"> <mat-header-cell
                *matHeaderCellDef>No Stations ?</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.noIpStations}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="No Smnp ?"> <mat-header-cell
                *matHeaderCellDef>No Smnp ?</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.snmpFlagOn}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="Export"> <mat-header-cell
                *matHeaderCellDef> Export </mat-header-cell> <mat-cell
                *matCellDef="let station">
            <button
                (click)="downloadCSV(station.productIdentifier,station.collectedData)">Export
                CSV</button>
            </mat-cell> </ng-container> 
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>



            <mat-paginator *ngIf="sCollectionList" class="marginless-paginator-range-label"
                #paginator
                [pageIndex]="0"
                 [pageSize]="5"
                [pageSizeOptions]="[5, 10, 20]"> </mat-paginator>

        </div>

Following is the array response I receive, which is what I`m trying to display on UI:

[{
"productIdentifier":"365",
"snmpFlagOn":false,
"collectedData":"ahsgabbs s[lsnnspm] n",
"noIpStations":true,
"collectionDate":1511721000000
}]

Am I missing anything??

Answer 1

This is because of this.paginator is undefined at the time it going to assign to this.dataSource.paginator.

This is how i solve the problem

For Pagination

  @ViewChild(MatPaginator, {static: false})
  set paginator(value: MatPaginator) {
    this.dataSource.paginator = value;
  }

For Sort

  @ViewChild(MatSort, {static: false})
  set sort(value: MatSort) {
    this.dataSource.sort = value;
  }

As a side note im using Angular 9 at the movement.