feat(sort) add example of sorting programmatically

Author: adgoncal

src/material-examples/table-sorting/table-sorting-example.css

@@ -5,3 +5,7 @@ table {
 th.mat-sort-header-sorted {
   color: black;
 }
+
+.mat-form-field {
+  margin: 16px 8px;
+}

src/material-examples/table-sorting/table-sorting-example.html

@@ -1,4 +1,27 @@
-<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+<mat-form-field>
+  <mat-select [(ngModel)]="sortActive" placeholder="Active" (selectionChange)="sortTable()">
+    <mat-option *ngFor="let option of displayedColumns" [value]="option">
+      {{option}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field>
+  <mat-select [(ngModel)]="sortDirection" placeholder="Direction" (selectionChange)="sortTable()">
+    <mat-option value="asc">
+      asc
+    </mat-option>
+    <mat-option value="desc">
+      desc
+    </mat-option>
+  </mat-select>
+</mat-form-field>
+
+<table mat-table
+       [dataSource]="dataSource"
+       matSort [matSortActive]="sortActive" [matSortDirection]="sortDirection"
+       (matSortChange)="handleSortChange($event)"
+       class="mat-elevation-z8">
 
   <!-- Position Column -->
   <ng-container matColumnDef="position">

src/material-examples/table-sorting/table-sorting-example.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatSort, MatTableDataSource} from '@angular/material';
+import {Sort, MatSort, MatSortable, MatTableDataSource} from '@angular/material';
 
 export interface PeriodicElement {
   name: string;
@@ -30,6 +30,8 @@ const ELEMENT_DATA: PeriodicElement[] = [
   templateUrl: 'table-sorting-example.html',
 })
 export class TableSortingExample implements OnInit {
+  sortActive = 'position';
+  sortDirection = 'asc';
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
@@ -38,4 +40,17 @@ export class TableSortingExample implements OnInit {
   ngOnInit() {
     this.dataSource.sort = this.sort;
   }
+
+  sortTable(): void {
+    this.sort.sort(<MatSortable>{
+      id: this.sortActive,
+      start: this.sortDirection,
+      disableClear: true,
+    });
+  }
+
+  handleSortChange(sort: Sort): void {
+    this.sortActive = sort.active;
+    this.sortDirection = sort.direction;
+  }
 }