Angular Material table with pagination filter and sorting not working

Question

I am working on an application in which i have implemented material table with pagination filteration and sorting. I have managed to have fetch the data from api and display it in material table, and implemented logic for filtering sorting and pagination , but somehow it is not working

Problem: Referring to various websites, I have declared in component ts file: @ViewChild(MatSort) sort: MatSort ; @ViewChild(MatPaginator) paginator: MatPaginator;

it is showing error : no initializer and is not definitely assigned in the constructor.

Below are the code files for better understanding

alarm.component.html

<section class = "headerClass">
  <div class = "container-fluid">
    <div class = "row">
      <div class = "col-sm-12">
        <mat-card>Alarm Summary
          <div class = "md-form mt-0">
            <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"> 
            <!--showing error unresolved variable value-->

          </div>
        </mat-card>
        <table [dataSource] = "dataSource" class = "mat-elevation-z8" mat-table matSort>

          <ng-container matColumnDef = "dateAndTime">
            <th *matHeaderCellDef mat-header-cell> Date And Time</th>
            <td *matCellDef = "let element" mat-cell> {{element.dated}} </td>
          </ng-container>

          <ng-container matColumnDef = "pointName">
            <th *matHeaderCellDef mat-header-cell mat-header-cell mat-sort-header> Point Name</th>
            <td *matCellDef = "let element" mat-cell> {{element.pointName}} </td>
          </ng-container>

          <ng-container matColumnDef = "dataName">
            <th *matHeaderCellDef mat-header-cell mat-header-cell mat-sort-header> Data Name</th>
            <td *matCellDef = "let element" mat-cell> {{element.dataName}} </td>
          </ng-container>

          <ng-container matColumnDef = "status">
            <th *matHeaderCellDef mat-header-cell> Status</th>
            <td *matCellDef = "let element" mat-cell> {{element.status}} </td>
          </ng-container>

          <tr *matHeaderRowDef = "displayedColumns" mat-header-row></tr>
          <tr *matRowDef = "let row; columns: displayedColumns;" mat-row></tr>
        </table>
        <mat-paginator [pageSizeOptions] = "[5, 10, 15]" showFirstLastButtons>
        </mat-paginator>
      </div>
    </div>
  </div>
</section>

alarm.component.ts

export class AlarmComponent implements OnInit, AfterViewInit {
  displayedColumns: string[] = ['dateAndTime', 'pointName', 'dataName', 'status'];
  dataSource: any = [];

  @ViewChild(MatSort) sort!: MatSort ;
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  constructor(private todoService: TodoService) {
  }

  ngOnInit(): void {
    this.getAlertsHistory();
  }

  ngAfterViewInit(): void {
  }

  getAlertsHistory() {
    this.todoService.getAlarmsHistory().subscribe((response: any) => {
        debugger;
        this.dataSource = response.alertResponses;
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      },
      error => {
        console.log(error);
      });
  }

}

any solution please ?

Purvang Gor Purvang Gor · Accepted Answer · 2021-05-13T12:32:40

Try adding this in your ts file:

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

also try changing dataSource:

  dataSource: MatTableDataSource<any>;

Angular Material table with pagination filter and sorting not working

1 Answers