Mat Table does not work with Mat Sort and Service Api

Issue

I need your help to order by column, the examples I have found work with mock data but not with services

table.component.ts

import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatSort, MatSortable } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { DataService } from '../data.service';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class TableComponent implements AfterViewInit {
  displayedColumns = ['position', 'name'];
  dataSource= new MatTableDataSource();
  data: any;
  @ViewChild(MatSort, {static: false}) sort!: MatSort;
  constructor(private service: DataService) { }

  ngAfterViewInit(): void {
    this.getList(); 
  }

  getList() {
    this.service.getData()
    .subscribe((res:any)=> {
      this.dataSource.data = res;
      this.dataSource.sort = this.sort;
      console.log('so',this.sort)
    })
    
  }

}

table.component.html

<div class="example-container mat-elevation-z8">
    <mat-table #table [dataSource]="dataSource" matSort>
  
      <!--- Note that these columns can be defined in any order.
            The actual rendered columns are set as a property on the row definition" -->
  
      <!-- Position Column -->
      <ng-container matColumnDef="position">
        <mat-header-cell *matHeaderCellDef mat-sort-header="position"> No. </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.title}} </mat-cell>
      </ng-container>
  
      <!-- Name Column -->
      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.userId}} </mat-cell>
      </ng-container>
  
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </div>

data.service.ts

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
  }
}

on this example works fine but the version its 6 https://stackblitz.com/edit/ng-mat-sort-issue?file=src%2Fapp%2Fapp.component.html but in my code doesnt

my example on stackblitz but the version its 12

Solution

According to Sort Header (Using sort with the mat-table section),

When used on a mat-table header, it is not required to set a mat-sort-header id on because by default it will use the id of the column.

The column sorting is based on the column id which is matColumnDef.

Make sure that the column id must be matched with the data property in order to make the sorting works.

table.component.ts

displayedColumns = ['title', 'userId'];

table.component.html

<ng-container matColumnDef="title">
  <mat-header-cell *matHeaderCellDef mat-sort-header>
    No.
  </mat-header-cell>
  <mat-cell *matCellDef="let element"> {{ element.title }} </mat-cell>
</ng-container>

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

Demo @ StackBlitz

Answered By - Yong Shun