title: Angular 7 Sorting on Custom DataSource
body: <p>I've got a custom DataSource that I've created in my Risk component to reach out to an API, retrieve a list of Risks and display them in a table. The table displays properly however my Sorting isn't working.</p>
  
  <p>I'm not entirely sure why however I call a refresh on the page every time the sort-able header is clicked, yet nothing. I've tried several different examples &amp; configurations and I'm missing something.</p>
  
  <p>Here's my risk.component.ts</p>
  
  <pre><code>export class RiskDashboardComponent implements AfterViewInit, OnInit {
  
  @ViewChild(MatSort) sort: MatSort;
  
  dataSource: RiskDataSource;
  
  displayedColumns = ['riskName'];
  
  constructor(private riskService: RiskManagmentService) {}
  
  ngOnInit() {
      this.dataSource = new RiskDataSource(this.riskService);
      this.dataSource.loadRisks();
  }
  
  ngAfterViewInit() {
      merge(this.sort.sortChange).pipe(
          tap(() =&gt; this.loadRisksPage())
      )
          .subscribe();
  }
  
  loadRisksPage() {
      this.dataSource.loadRisks();
  }
  
  
  }
  
  export class RiskDataSource implements DataSource&lt;IRisk&gt; {
  
  private risksSubject = new BehaviorSubject&lt;IRisk[]&gt;([]);
  private loadingSubject = new BehaviorSubject&lt;boolean&gt;(false);
  
  constructor(private riskService: RiskManagmentService) {}
  
  connect(collectionViewer: CollectionViewer): Observable&lt;IRisk[]&gt; {
      return this.risksSubject.asObservable();
  
  }
  
  disconnect(collectionViewer: CollectionViewer): void {
      this.risksSubject.complete();
      this.loadingSubject.complete();
  }
  
  loadRisks() {
      this.loadingSubject.next(true);
      this.riskService.getAllRisks().subscribe(risk =&gt; this.risksSubject.next(risk));
  }
  }
  </code></pre>
  
  <p>The risk.component.html</p>
  
  <pre><code>&lt;div&gt;
  &lt;mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource"
             matSort matSortActive="riskName"&gt;
      &lt;ng-container matColumnDef="riskName"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Risk Name &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let risk"&gt; {{risk.riskRegister.riskName}} &lt;/mat-cell&gt;
      &lt;/ng-container&gt;
      &lt;mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/mat-header-row&gt;
      &lt;mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/mat-row&gt;
  &lt;/mat-table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(inb4 missing div tag, its in there, just isn't showing)</p>
  
  <p>Every time the Risk Name order arrow is clicked it queries the database again for the list of risks</p>
  
  <p>Any help would be greatly appreciated!</p>