Mat-sort is not working in angular mat-table

Question

My mat-table is working fine, but when adding mat-sort following the official api documentation, it fails at the ngAfterViewInit with the following message

Cannot set property 'sort' of undefined aq LeadsComponent.push../src/app/leads/leads.component.ts.LeadsComponent.ngAfterViewInit

There is already a SO post on Mat-table Sorting Demo and tried them but I still am not able to get it working.

can some one hemp me solve this issue? The official example works with a "static" MatTableDataSourcedefined in the component itself, I am querying from my back-end, however.

MatSortModule is already imported in app.module.ts, mat-sort-header directives are applied to the columns and the ngAfterViewInit is already exactly like in the official example...

 export class LeadsComponent implements OnInit,AfterViewInit  {

  displayedColumns: string[] = ['name', 'leadStatus', 'mobile', 'email', 'actions'];
  dataSource: MatTableDataSource<LeadsChildObject>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  constructor(public dialog: MatDialog, private dashBoardService: LeadsService,
    private toast: ToastrService) {
  }

    ngAfterViewInit() {
        this.dataSource.sort = this.sort;
      }

      ngOnInit() {
        this.dashboardService.getFeedback.subscribe(
          res => {
            this.leadlist= res;
            this.dataSource = new MatTableDataSource(this.leadlist);
          }
        );
      }
    }
}

Where do you initialize this.dataSource?

Julien Ambos
– Julien Ambos

2019-02-26 10:54:41 +00:00
Commented Feb 26, 2019 at 10:54 — Julien Ambos
– Julien Ambos, Commented Feb 26, 2019 at 10:54
i updated my code please see now

AbhiRam
– AbhiRam

2019-02-26 10:56:29 +00:00
Commented Feb 26, 2019 at 10:56 — AbhiRam
– AbhiRam, Commented Feb 26, 2019 at 10:56

Julien Ambos · Accepted Answer · 2019-02-26 11:07:13Z

Cannot set property 'sort' of undefined aq LeadsComponent.push../src/app/leads/leads.component.ts.LeadsComponent.ngAfterViewInit

This error refers to "sort" being called on an undefined property, which, after your update, is the datasource property, because you don't initialize it.

It is not initialized, because your subscribe() (where you initialize it) is async, therefore, the initialization happens after ngAfterViewInit() happens.

Please initialize it in your ngOnInit() with:

ngOnInit() {
  // This line of code below:
  this.dataSource = new MatTableDataSource<LeadsChildObject>();

  this.dashboardService.getFeedback.subscribe(
    res => {
      this.leadlist= res;
      this.dataSource = new MatTableDataSource(this.leadlist);
      this.dataSource.sort = this.sort;
    }
  );
}

The problem in your approach ist, that you are mistaking the use of the MatTableDataSource with a plain array approach (Simple Table approach). Please find this documentation to implement the MatTableDataSource approach

GaryB · Accepted Answer · 2019-02-26 10:59:09Z

2

Could you please try this way:

  ngOnInit() {
    this.dashboardService.getFeedback.subscribe(
      res => {
        this.leadlist= res;
        this.dataSource = new MatTableDataSource(this.leadlist);
        this.dataSource.sort = this.sort;  //new line, also remove same from viewinit
      }
    );
  }

answered Feb 26, 2019 at 10:59

GaryB

3841 silver badge9 bronze badges

Collectives™ on Stack Overflow

Mat-sort is not working in angular mat-table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related