Mat-table, mat-sort is not working properly

I'm not sure how your UserModel looks, but I don't think it contains a property Column1:

matColumnDef="Column1"

Change that part to something like matColumnDef="displayUserName" or whatever property you have in the model.

Also change displayedColumns = ['displayUserName'];

From the docs:

By default, the MatTableDataSource sorts with the assumption that the sorted column's name matches the data property name that the column displays. For example, the following column definition is named position, which matches the name of the property displayed in the row cell.


ngOnInit() {
  this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
    this.dataSource = new MatTableDataSource(userNameData);
    setTimeout(() => this.dataSource.sort = this.sort);
  });
  this.testService.fetchUserName();
}
  1. Your sorter is bound to your datasource at view init, but it doesn't wait for your request to be made.
  2. You should create a new instance of a data source and stop fiddling in the properties. Material provides an high level of abstraction, take advantage of that.

N.B. : In my solution you can see a timeout, it's for change detection. It is possible that you don't need it, I just put it there just to be sure.