compat(sort): add mat compatible sort event (#6611)

Author: andrewseguin

src/demo-app/table/person-data-source.ts

@@ -15,7 +15,7 @@ export class PersonDataSource extends DataSource<any> {
   connect(): Observable<UserData[]> {
     const displayDataChanges = [
       this._paginator.page,
-      this._sort.mdSortChange,
+      this._sort.sortChange,
       this._peopleDatabase.dataChange
     ];
     return Observable.merge(...displayDataChanges).map(() => {

src/lib/sort/sort-header.ts

@@ -91,7 +91,7 @@ export class MdSortHeader implements MdSortable {
       throw getMdSortHeaderNotContainedWithinMdSortError();
     }
 
-    this._rerenderSubscription = merge(_sort.mdSortChange, _intl.changes).subscribe(() => {
+    this._rerenderSubscription = merge(_sort.sortChange, _intl.changes).subscribe(() => {
       changeDetectorRef.markForCheck();
     });
   }

src/lib/sort/sort.spec.ts

@@ -200,10 +200,10 @@ function testSingleColumnSortDirectionSequence(fixture: ComponentFixture<SimpleM
          [mdSortDirection]="direction"
          [mdSortDisableClear]="disableClear"
          (mdSortChange)="latestSortEvent = $event">
-      <div id="defaultSortHeaderA" #defaultSortHeaderA md-sort-header="defaultSortHeaderA"> A </div>
-      <div id="defaultSortHeaderB" #defaultSortHeaderB md-sort-header="defaultSortHeaderB"> B </div>
-      <div id="overrideStart" md-sort-header="overrideStart" start="desc"> D </div>
-      <div id="overrideDisableClear" md-sort-header="overrideDisableClear" disableClear> E </div>
+      <div id="defaultSortHeaderA" #defaultSortHeaderA md-sort-header="defaultSortHeaderA"> A</div>
+      <div id="defaultSortHeaderB" #defaultSortHeaderB md-sort-header="defaultSortHeaderB"> B</div>
+      <div id="overrideStart" md-sort-header="overrideStart" start="desc"> D</div>
+      <div id="overrideDisableClear" md-sort-header="overrideDisableClear" disableClear> E</div>
     </div>
   `
 })

src/lib/sort/sort.ts

@@ -72,7 +72,10 @@ export class MdSort {
   set _matSortDisableClear(v) { this.disableClear = v; }
 
   /** Event emitted when the user changes either the active sort or sort direction. */
-  @Output() mdSortChange = new EventEmitter<Sort>();
+  @Output('mdSortChange') readonly sortChange = new EventEmitter<Sort>();
+
+  @Output('matSortChange')
+  get _matSortChange(): EventEmitter<Sort> { return this.sortChange; }
 
   /**
    * Register function to be used by the contained MdSortables. Adds the MdSortable to the
@@ -106,7 +109,7 @@ export class MdSort {
       this.direction = this.getNextSortDirection(sortable);
     }
 
-    this.mdSortChange.next({active: this.active, direction: this.direction});
+    this.sortChange.next({active: this.active, direction: this.direction});
   }
 
   /** Returns the next sort direction of the active sortable, checking for potential overrides. */

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

@@ -83,12 +83,12 @@ export class ExampleDataSource extends DataSource<GithubIssue> {
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<GithubIssue[]> {
     const displayDataChanges = [
-      this.sort.mdSortChange,
+      this.sort.sortChange,
       this.paginator.page
     ];
 
     // If the user changes the sort order, reset back to the first page.
-    this.sort.mdSortChange.subscribe(() => this.paginator.pageIndex = 0);
+    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
 
     return Observable.merge(...displayDataChanges)
       .startWith(null)

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

@@ -140,7 +140,7 @@ export class ExampleDataSource extends DataSource<any> {
     // Listen for any changes in the base data, sorting, filtering, or pagination
     const displayDataChanges = [
       this._exampleDatabase.dataChange,
-      this._sort.mdSortChange,
+      this._sort.sortChange,
       this._filterChange,
       this._paginator.page,
     ];

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

@@ -90,7 +90,7 @@ export class ExampleDataSource extends DataSource<any> {
   connect(): Observable<UserData[]> {
     const displayDataChanges = [
       this._exampleDatabase.dataChange,
-      this._sort.mdSortChange,
+      this._sort.sortChange,
     ];
 
     return Observable.merge(...displayDataChanges).map(() => {