angular - mat-sort not working on 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 at ViewFeedbackComponent.ngAfterViewInit

There is already a SO post on this issue (see following link) Mat-table Sorting Demo not Working but I still am not able to get it working.

Does somebody spot the issue? The official example works with a "static" MatTableDataSourcedefined in the component itself, I am querying from my back-end, however.

Any help is greatly appreciated!

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...

import {  Component,  OnInit,  ViewEncapsulation,  ViewChild,  AfterViewInit} from '@angular/core';
import {  Feedback} from '../../../../../models/feedback';
import {  FeedbackService} from '../../services/feedback.service';
import {  MatTableDataSource,  MatSort} from '@angular/material';


@Component({
  selector: 'app-view-feedback',
  templateUrl: './view-feedback.component.html',
  styleUrls: ['./view-feedback.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class ViewFeedbackComponent implements OnInit, AfterViewInit {

  feedbacks: Feedback[] = [];
  showSpinner: boolean = true;
  displayedColumns: String[] = [
    'id',
    'user',
    'timestamp',
    'stars'
  ];
  dataSource: MatTableDataSource < Feedback > ;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private _feedbackService: FeedbackService) {}

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

  }

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


}

Answer 1

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