title: Mat-table reset mat-sort to initial state
body: <p>I have a mat-table in which I have several sort-able column. I can set the initial sort of the table with the matSortActive and matSortDirection properties on the mat-table. Using this, the arrow indicating the sorting direction in the headers is displayed correctly.  </p>
  
  <p>Now when I am trying to reset the sorting to the initial state by using a button the sorting is correctly reset. However, the arrow in the header is not updated. So the arrow is still displayed in the header of the previous sorted column.
  How can I get the arrow to be displayed in the initial state again? </p>
  
  <p>My table and reset button in HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button mat-button mat-raised-button (click)="removeFilters()" class="reset-button"&gt;Verwijder filters&lt;/button&gt;
  
  &lt;mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)" matSortActive="comp_name_sort" matSortDirection="asc"&gt;
    &lt;ng-container matColumnDef="assetName"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header="comp_name_sort"&gt;Systeem&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let asset"&gt; {{asset.comp_name}} &lt;/mat-cell&gt;
    &lt;/ng-container&gt;
  
    &lt;ng-container matColumnDef="softwareName"&gt;
      &lt;mat-header-cell *matHeaderCellDef mat-sort-header="soft_name_sort"&gt;Software&lt;/mat-header-cell&gt;
      &lt;mat-cell *matCellDef="let asset"&gt; {{asset.soft_name}} &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;
  </code></pre>
  
  <p>My ts file:</p>
  
  <pre class="lang-ts prettyprint-override"><code>  export class AssetsComponent implements OnInit {
  
    @ViewChild(MatSort) sort: MatSort;
  
    assets: Asset[];
    displayedColumns = ['assetName', 'softwareName',];
    dataSource = new MatTableDataSource&lt;Asset&gt;(this.assets);
  
    constructor( private assetsService: AssetsService) { }
  
    ngOnInit() {
      this.getAssets();
    }
  
    getAssets(): void {
      this.assetsService.getAssets().subscribe(
        assets =&gt; {
          this.assets = assets;
          this.dataSource = new MatTableDataSource&lt;Asset&gt;(this.assets);
        }
      );
    }
  
    sortData(event): void {
      this.assetsQueryService.setSorts(event);
      this.getAssets();
    }
  
    removeFilters() {
      this.sort.active = 'comp_name_sort';
      this.sort.direction = 'asc';
      this.sort.sortChange.emit({active: 'comp_name_sort', direction: 'asc'});
      this.assetsQueryService.removeFilters();
      this.getAssets();
    }
  
  }
  </code></pre>
  
  <p>The sorting column and direction are passed to the assetsService because sorting is done in the backend (because of server-side pagination, not shown here). This is all working well, also with the reset button. The only problem is the displayed arrow. 
  So in summary, how do I reset the sorting arrow that is displayed in the table to it's initial state programmatically? </p>
  
  <p>Any help would be appreciated. </p>