title: I'm trying to implement a Material Sorted
body: <p>I'm trying to implement the Material Sorting, using this reference:
  <a href="https://material.angular.io/components/sort/overview" rel="nofollow noreferrer">https://material.angular.io/components/sort/overview</a></p>
  
  <p>The unique difference is that I'm loading my data after changed a select control.</p>
  
  <p>When I click at the column, to theoretically sort the data, nothing happen.</p>
  
  <p>could someone help me?</p>
  
  <p>Sort Data method:</p>
  
  <pre><code>sortData(sort: Sort) {
  debugger;
  
  const data = this.colaborators.slice();
  if (!sort.active || sort.direction === '') {
    this.sortedColaborators = data;
    return;
  }
  
  this.sortedColaborators = data.sort((a, b) =&gt; {
    const isAsc = sort.direction === 'asc';
    switch (sort.active) {
      case 'register': return compare(a.register, b.register, isAsc);
      case 'name': return compare(a.name, b.name, isAsc);
      case 'company': return compare(a.company, b.company, isAsc);
      case 'costCenter': return compare(a.costCenter, b.costCenter, isAsc);
      case 'linhaTransporte': return compare(a.linhaTransporte, b.linhaTransporte, isAsc);
      case 'saldoHorasMes': return compare(a.saldoHorasMes, b.saldoHorasMes, isAsc);
      case 'saldoHorasAno': return compare(a.saldoHorasAno, b.saldoHorasAno, isAsc);
      default: return 0;
    }
  });
  </code></pre>
  
  <p>}  </p>
  
  <p>compare function outside of the class</p>
  
  <pre><code>function compare(a: number | string, b: number | string, isAsc: boolean) {
  </code></pre>
  
  <p>return (a &lt; b ? -1 : 1) * (isAsc ? 1 : -1);
  }</p>
  
  <p>constructor of the class:</p>
  
  <pre><code>constructor(dialogService: DialogService,
  private router: Router,
  private formBuilder: FormBuilder,
  private utilService: UtilService,
  private workScheduleService: WorkscheduleService,
  private activatedRoute: ActivatedRoute,
  private route: ActivatedRoute,
  private location: Location) {
  
  super(dialogService);
  
  this.workschedule = new WorkSchedule();
  this.showWorkScheduleConfirmation = false;
  this.showWorkSchedule = true;
  this.colaborators = [];
  this.sortedColaborators = [];
  </code></pre>
  
  <p>}</p>
  
  <p>Initializations:</p>
  
  <pre><code>colaborators: Colaborator[];
  </code></pre>
  
  <p>sortedColaborators: Colaborator[];</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;table class="table" matSort (matSortChange)="sortData($event)"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th style="width: 40px; text-align: center;"&gt;&lt;input type="checkbox" [ngModelOptions]="{standalone: true}" [disabled]="checkedDisabled" [(ngModel)]="selectedAll" (click)="checkAll($event)"&gt;&lt;/th&gt;
                              &lt;th style="width: 40px; text-align: center;"&gt;&lt;input type="checkbox" [ngModelOptions]="{standalone: true}" [disabled]="checkedDisabled" [(ngModel)]="selectedAllTransport" (click)="checkAllTransport($event)"&gt;&lt;/th&gt;
                              &lt;th mat-sort-header="register" class="pointer"&gt;Registro&lt;/th&gt;
                              &lt;th class="pointer"&gt;Nome&lt;/th&gt;
                              &lt;th class="priority-2 pointer"&gt;Empresa&lt;/th&gt;
                              &lt;th class="priority-2 pointer"&gt;C.Custo&lt;/th&gt;
                              &lt;th class="priority-3 pointer"&gt;Linha&lt;/th&gt;
                              &lt;th class="priority-4 pointer"&gt;Saldo Mensal&lt;/th&gt;
                              &lt;th class="priority-5 pointer"&gt;Saldo Anual&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody *ngFor="let colab of sortedColaborators | filter: searchText"&gt;
                          &lt;tr [ngClass]="{ 'row-error' : colab.error, '' : !colab.error }"&gt;
                              &lt;td style="width: 40px; text-align: center;"&gt;&lt;input type="checkbox" [disabled]="colab.disabled" [(ngModel)]="colab.checked" [ngModelOptions]="{standalone: true}" (change)="checkIfAllSelected(colab)"&gt;&lt;/td&gt;
                              &lt;td style="width: 40px; text-align: center;"&gt;&lt;input type="checkbox" [disabled]="colab.disabled" [(ngModel)]="colab.checkedTransport" [ngModelOptions]="{standalone: true}" (change)="checkIfAllSelectedTransport(colab)"&gt;&lt;/td&gt;
                              &lt;td&gt;{{colab.register}}&lt;/td&gt;
                              &lt;td&gt;{{colab.name}}&lt;/td&gt;
                              &lt;td class="priority-2"&gt;{{colab.company}}&lt;/td&gt;
                              &lt;td class="priority-2"&gt;{{colab.costCenter}}&lt;/td&gt;
                              &lt;td class="priority-3"&gt;
                                  &lt;select class="form-control" [disabled]="colab.disabled" [ngModelOptions]="{standalone: true}" [(ngModel)]="colab.linhaTransporte"&gt;
                                      &lt;option *ngFor="let linhaTransporte of linhasTransporte"
                                          [ngValue]="linhaTransporte.id"&gt;{{linhaTransporte.numero}}&lt;/option&gt;
                                  &lt;/select&gt;&lt;/td&gt;
                              &lt;td class="priority-4"&gt;{{colab.saldoHorasMes}}&lt;/td&gt;
                              &lt;td class="priority-5"&gt;{{colab.saldoHorasAno}}&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
  </code></pre>