mat-sort not working on mat-table
Problem is that next piece of code
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
is happen before you actually got your table in subscription here:
ngOnInit() {
this._feedbackService.getFeedback.subscribe(
res => {
this.feedbacks = res;
this.dataSource = new MatTableDataSource(this.feedbacks);
}
);
}
As a possible solution, you could synchronize ngAfterViewInit
call and getFeedback
subscription via Observable.zip
. Please refer to RxJS zip documentation
The simple solution for this is instead of declaring sorting in ngAfterViewInit, declare after you get the result from the "this._feedbackService.getFeedback.subscribe".
The solution is as below.
ngOnInit() {
this._feedbackService.getFeedback.subscribe(
res => {
this.feedbacks = res;
this.dataSource = new MatTableDataSource(this.feedbacks);
this.dataSource.sort = this.sort; //this will solve your problem
}
);
}
The above one works perfectly for me.
Thanks,
For matSort to work the type defination is important, at least that's what I found. So with type as any in the code : dataSource: MatTableDataSource; it will not work. There has to be a type defined here to make it work, try to define a interface and pass it in the generics of MatTableDataSource . Also matColumnDef has to match the property name of the defined type.