Angular + Material - How to refresh a data source (mat-table)

I don't know if the ChangeDetectorRef was required when the question was created, but now this is enough:

import { MatTableDataSource } from '@angular/material/table';// ...dataSource = new MatTableDataSource<MyDataType>();refresh() {  this.myService.doSomething().subscribe((data: MyDataType[]) => {    this.dataSource.data = data;  }}

Example:
StackBlitz

Trigger a change detection by using ChangeDetectorRef in the refresh() method just after receiving the new data, inject ChangeDetectorRef in the constructor and use detectChanges like this:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';import { LanguageModel, LANGUAGE_DATA } from '../../../../models/language.model';import { LanguageAddComponent } from './language-add/language-add.component';import { AuthService } from '../../../../services/auth.service';import { LanguageDataSource } from './language-data-source';import { LevelbarComponent } from '../../../../directives/levelbar/levelbar.component';import { DataSource } from '@angular/cdk/collections';import { Observable } from 'rxjs/Observable';import 'rxjs/add/observable/of';import { MatSnackBar, MatDialog } from '@angular/material';@Component({  selector: 'app-language',  templateUrl: './language.component.html',  styleUrls: ['./language.component.scss']})export class LanguageComponent implements OnInit {  displayedColumns = ['name', 'native', 'code', 'level'];  teachDS: any;  user: any;  constructor(private authService: AuthService, private dialog: MatDialog,              private changeDetectorRefs: ChangeDetectorRef) { }  ngOnInit() {    this.refresh();  }  add() {    this.dialog.open(LanguageAddComponent, {      data: { user: this.user },    }).afterClosed().subscribe(result => {      this.refresh();    });  }  refresh() {    this.authService.getAuthenticatedUser().subscribe((res) => {      this.user = res;      this.teachDS = new LanguageDataSource(this.user.profile.languages.teach);      this.changeDetectorRefs.detectChanges();    });  }}

So for me, nobody gave the good answer to the problem that i met which is almost the same than @Kay. For me it's about sorting, sorting table does not occur changes in the mat.I purpose this answer since it's the only topic that i find by searching google.I'm using Angular 6.

As said here:

Since the table optimizes for performance, it will not automatically check for changes to the data array. Instead, when objects are added, removed, or moved on the data array, you can trigger an update to the table's rendered rows by calling its renderRows() method.

So you just have to call renderRows() in your refresh() method to make your changes appears.

See here for integration.