Angular matSort does not sort

Question

I'm having trouble with importing matSort into my matTable.

I'm providing you with my code:

dashboard.component.ts

import {Component, ViewChild} from '@angular/core'; import {UserService} from "../user.service"; import {DohvatMantisaService} from "../dohvat-mantisa.service"; import {Mantisi} from "../Mantisi"; import {Observable} from "rxjs/Observable"; import {DataSource} from "@angular/cdk/collections"; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/startWith'; import 'rxjs/add/observable/merge'; import {MatSort} from '@angular/material'; @Component({   selector: 'app-dashboard',   templateUrl: './dashboard.component.html',   styleUrls: ['./dashboard.component.css'] }) export class DashboardComponent{   displayedColumns = ['projekt', 'manits', 'kategorija','ozbiljnost','datum_prijave','postavio','odjel','postavio','naziv','status','planirana_isporuka'];   constructor(private user:UserService, private dohvatMantisa:DohvatMantisaService) {   }   dataSource: TableDataSource | null;   mantisi: Mantisi[];   name = this.user.getUsername();   @ViewChild(MatSort) sort: MatSort;   ngOnInit() {     this.dataSource = new TableDataSource(this.dohvatMantisa,this.sort);   } }  export class TableDataSource extends DataSource<Mantisi>{   constructor(private mantisiDS: DohvatMantisaService,private sort: MatSort){     super();   }   connect(): Observable<Mantisi[]> {     const displayDataChanges = [       this.mantisiDS.dohvatiMantise(),       this.sort.sortChange,     ];      return Observable.merge(...displayDataChanges).map(() => {       return this.getSortedData();     });   }   disconnect() {}    getSortedData(): Mantisi[]{     const data = this.mantisiDS.prikazMantisa().slice();     if (!this.sort.active || this.sort.direction == '') { return data; }     return data.sort((a, b) => {       let propertyA: number|string = '';       let propertyB: number|string = '';       switch (this.sort.active) {         case 'projekt': [propertyA, propertyB] = [a.projekt, b.projekt]; break;         case 'manits': [propertyA, propertyB] = [a.manits, b.manits]; break;         case 'kategorija': [propertyA, propertyB] = [a.kategorija, b.kategorija]; break;         case 'ozbiljnost': [propertyA, propertyB] = [a.ozbiljnost, b.ozbiljnost]; break;         case 'datum_prijave': [propertyA, propertyB] = [a.datum_prijave, b.datum_prijave]; break;         case 'postavio': [propertyA, propertyB] = [a.postavio, b.postavio]; break;         case 'naziv': [propertyA, propertyB] = [a.naziv, b.naziv]; break;         case 'status': [propertyA, propertyB] = [a.status, b.status]; break;         case 'planirana_isporuka': [propertyA, propertyB] = [a.planirana_isporuka, b.planirana_isporuka]; break;       }        let valueA = isNaN(+propertyA) ? propertyA : +propertyA;       let valueB = isNaN(+propertyB) ? propertyB : +propertyB;        return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);     });   } } 

This is my service: dohvatMantisaService

import { Injectable } from '@angular/core'; import {Http, Response, RequestOptions, Headers} from "@angular/http"; import {Observable} from "rxjs/Observable"; import {Mantisi} from "./Mantisi"; import 'rxjs'; import 'rxjs/operator/map'; import 'rxjs/operator/do';  @Injectable() export class DohvatMantisaService {   constructor(public http:Http) { }   result: Mantisi[];   dohvatiMantise(): Observable<Mantisi[]>{     return this.http.get('/mantis/getMantisReport').map(this.extractData);   }   private extractData(response: Response) {     let body = response.json();     return body || {};   }    prikazMantisa(): Mantisi[]{     this.dohvatiMantise().subscribe(res => this.result = res);     return this.result;   } } 

And im providing you with my dashboard.component.html matSort row:

<mat-table #table [dataSource]="dataSource" class="example-table" matSort> 

The main problem here is that data is loaded and acquired from http request but I'm getting errors in console something like this:

Cannot read property 'sortChange' of undefined at TableDataSource.webpackJsonp.../../../../../src/app/dashboard/dashboard.component.ts.TableDataSource.connect (dashboard.component.ts:36) at MatTable.webpackJsonp.../../../cdk/esm5/table.es5.js.CdkTable._observeRenderChanges (table.es5.js:602) at MatTable.webpackJsonp.../../../cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked (table.es5.js:522)

It tells me that this.sort.sortChange is undefined. I searched all bit of internet and couldn't find proper answer. Hope you can help me with that.

Answer 1

If you use "*ngIf" to initialy hide the table container in your template, the viewchield will be undefined.

Answer 2

I just had this problem, and all I had to do was making sure you're referencing your matSort viewChild correctly and make sure you have added the MatSortModule in your module.ts file in the imports area.

Like the following:

@NgModule({   imports: [     MatSortModule,     MatTableModule,   ] )}