Why does angular material table sort break when I change where I set this.dataSource.sort-CodePudding

In a related question I was told that if I wanted to sort an angular material table that was populated from an http.get() request, I would have to set the sort after the response returned (e.g. in the subscribe()). This makes sense to me.

However, after playing around with it a bit, I tried to modify my original Stackblitz to set the sort for the angular material table that was populated from inline static json in the same way, in the subscribe(). This broke the sort for this table.

Stackblitz: https://stackblitz.com/edit/angular-ivy-pvmzbs

Before:


  ngOnInit(): void {
    if (this.name === 'Inline') {
      this.api.getDataInline().subscribe((response) => {
        this.dataSource = new MatTableDataSource(response);
      });
    } else if (this.name === 'Http') {
      this.api.getDataHttp().subscribe((response) => {
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.sort = this.sort;
      });
    }
  }

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

After:


  ngOnInit(): void {
    if (this.name === 'Inline') {
      this.api.getDataInline().subscribe((response) => {
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.sort = this.sort;
      });
    } else if (this.name === 'Http') {
      this.api.getDataHttp().subscribe((response) => {
        this.dataSource = new MatTableDataSource(response);
        this.dataSource.sort = this.sort;
      });
    }
  }

  ngAfterViewInit() {}

Why does this break the sort for the inline table?

CodePudding user response：

Replace ngOnInit with ngAfterViewInit. In the OnInit call sort was not yet initialized, in AfterViewInit you are sure that elements from the template are initialized as well. And the Http table was working because matSort was not yet initialized during the first subscription, but then on the second probably it already was.

CodePudding user response：

As mentioned in other answer, the static data arrives before the view has been rendered, thus it is undefined. You can provide { static: true } in ViewChild. You need to set that for being able to run your code in OnInit.

@ViewChild(MatSort, { static: true }) sort!: MatSort;

Your forked STACKBLITZ