title: Angular matSort does not sort
body: <p>I'm having trouble with importing matSort into my matTable.</p>
  <p>I'm providing you with my code:</p>
  <p><strong>dashboard.component.ts</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, ViewChild} from '@angular/core';
  import {UserService} from &quot;../user.service&quot;;
  import {DohvatMantisaService} from &quot;../dohvat-mantisa.service&quot;;
  import {Mantisi} from &quot;../Mantisi&quot;;
  import {Observable} from &quot;rxjs/Observable&quot;;
  import {DataSource} from &quot;@angular/cdk/collections&quot;;
  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&lt;Mantisi&gt;{
    constructor(private mantisiDS: DohvatMantisaService,private sort: MatSort){
      super();
    }
    connect(): Observable&lt;Mantisi[]&gt; {
      const displayDataChanges = [
        this.mantisiDS.dohvatiMantise(),
        this.sort.sortChange,
      ];
  
      return Observable.merge(...displayDataChanges).map(() =&gt; {
        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) =&gt; {
        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 &lt; valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
      });
    }
  }
  </code></pre>
  <p>This is my service:
  <strong>dohvatMantisaService</strong></p>
  <pre class="lang-ts prettyprint-override"><code>import { Injectable } from '@angular/core';
  import {Http, Response, RequestOptions, Headers} from &quot;@angular/http&quot;;
  import {Observable} from &quot;rxjs/Observable&quot;;
  import {Mantisi} from &quot;./Mantisi&quot;;
  import 'rxjs';
  import 'rxjs/operator/map';
  import 'rxjs/operator/do';
  
  @Injectable()
  export class DohvatMantisaService {
    constructor(public http:Http) { }
    result: Mantisi[];
    dohvatiMantise(): Observable&lt;Mantisi[]&gt;{
      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 =&gt; this.result = res);
      return this.result;
    }
  }
  </code></pre>
  <p>And im providing you with my dashboard.component.html matSort row:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;mat-table #table [dataSource]=&quot;dataSource&quot; class=&quot;example-table&quot; matSort&gt;
  </code></pre>
  <p>The main problem here is that data is loaded and acquired from http request but I'm getting errors in console something like this:</p>
  <blockquote>
  <p>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)</p>
  </blockquote>
  <p>It tells me that <strong>this.sort.sortChange</strong> is undefined.
  I searched all bit of internet and couldn't find proper answer. Hope you can help me with that.</p>