comments

Author: andrewseguin

src/lib/sort/sort-header.html

@@ -1,4 +1,4 @@
-<div class="mat-sort-header-container"
+<div class="mat-sort-header-container" type="button"
      [class.mat-sort-header-position-before]="arrowPosition == 'before'">
   <button class="mat-sort-header-button"
           [attr.aria-label]="_intl.sortButtonLabel(id)">

src/lib/sort/sort-header.scss

@@ -3,12 +3,9 @@ $mat-sort-header-arrow-container-size: 10px;
 $mat-sort-header-arrow-pointer-length: 8px;
 $mat-sort-header-arrow-thickness: 2px;
 
-:host {
-  cursor: pointer;
-}
-
 .mat-sort-header-container {
   display: flex;
+  cursor: pointer;
 }
 
 .mat-sort-header-position-before {
@@ -51,15 +48,15 @@ $mat-sort-header-arrow-thickness: 2px;
 }
 
 .mat-sort-header-stem {
-  background: black;
+  background: currentColor;
   transform: rotate(135deg);
   height: $mat-sort-header-arrow-container-size;
   width: $mat-sort-header-arrow-thickness;
   margin: auto;
 }
 
 .mat-sort-header-pointer-left {
-  background: black;
+  background: currentColor;
   width: $mat-sort-header-arrow-thickness;
   height: $mat-sort-header-arrow-pointer-length;
   position: absolute;
@@ -68,7 +65,7 @@ $mat-sort-header-arrow-thickness: 2px;
 }
 
 .mat-sort-header-pointer-right {
-  background: black;
+  background: currentColor;
   width: $mat-sort-header-arrow-pointer-length;
   height: $mat-sort-header-arrow-thickness;
   position: absolute;

src/lib/sort/sort-header.ts

@@ -6,7 +6,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, Input, Optional} from '@angular/core';
+import {
+  ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, Optional,
+  ViewEncapsulation
+} from '@angular/core';
 import {MdSort, MdSortable} from './sort';
 import {MdSortIntl} from './sort-intl';
 import {CdkColumnDef} from '../core/data-table/cell';
@@ -31,7 +34,9 @@ import {getMdSortHeaderNotContainedWithinMdSortError} from './sort-errors';
   host: {
     '(click)': '_sort.sort(this)',
     '[class.mat-sort-header-sorted]': '_isSorted()',
-  }
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MdSortHeader implements MdSortable {
   /**
@@ -62,12 +67,15 @@ export class MdSortHeader implements MdSortable {
   get _id() { return this.id; }
   set _id(v: string) { this.id = v; }
 
-  constructor(@Optional() public _sort: MdSort,
-              public _intl: MdSortIntl,
+  constructor(private _intl: MdSortIntl,
+              private _changeDetectorRef: ChangeDetectorRef,
+              @Optional() public _sort: MdSort,
               @Optional() public _cdkColumnDef: CdkColumnDef) {
     if (!_sort) {
       throw getMdSortHeaderNotContainedWithinMdSortError();
     }
+
+    _sort.mdSortChange.subscribe(() => _changeDetectorRef.markForCheck());
   }
 
   ngOnInit() {
@@ -84,6 +92,6 @@ export class MdSortHeader implements MdSortable {
 
   /** Whether this MdSortHeader is currently sorted in either ascending or descending order. */
   _isSorted() {
-    return this._sort.active == this.id && this._sort.direction != '';
+    return this._sort.active == this.id && this._sort.direction;
   }
 }

src/lib/sort/sort.ts

@@ -67,7 +67,6 @@ export class MdSort {
   /**
    * Register function to be used by the contained MdSortables. Adds the MdSortable to the
    * collection of MdSortables.
-   * @docs-private
    */
   register(sortable: MdSortable) {
     if (!sortable.id) {
@@ -83,7 +82,6 @@ export class MdSort {
   /**
    * Unregister function to be used by the contained MdSortables. Removes the MdSortable from the
    * collection of contained MdSortables.
-   * @docs-private
    */
   unregister(sortable: MdSortable) {
     this.sortables.delete(sortable.id);