fix(sort): throw error on invalid direction (#7378)

src/lib/sort/sort-errors.ts

@@ -20,3 +20,8 @@ export function getSortHeaderNotContainedWithinSortError(): Error {
 export function getSortHeaderMissingIdError(): Error {
   return Error(`MatSortHeader must be provided with a unique id.`);
 }
+
+/** @docs-private */
+export function getSortInvalidDirectionError(direction: string): Error {
+  return Error(`${direction} is not a valid sort direction ('asc' or 'desc').`);
+}

src/lib/sort/sort-header.ts

@@ -126,6 +126,7 @@ export class MatSortHeader implements MatSortable {
 
   /** Whether this MatSortHeader 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 === 'asc' || this._sort.direction === 'desc';
   }
 }

src/lib/sort/sort.spec.ts

@@ -20,6 +20,7 @@ import {
   getSortDuplicateSortableIdError,
   getSortHeaderMissingIdError,
   getSortHeaderNotContainedWithinSortError,
+  getSortInvalidDirectionError,
 } from './sort-errors';
 
 
@@ -37,7 +38,8 @@ describe('MatSort', () => {
         MatTableMatSortApp,
         MatSortHeaderMissingMatSortApp,
         MatSortDuplicateMatSortableIdsApp,
-        MatSortableMissingIdApp
+        MatSortableMissingIdApp,
+        MatSortableInvalidDirection
       ],
     }).compileComponents();
   }));
@@ -136,6 +138,11 @@ describe('MatSort', () => {
         .toThrowError(wrappedErrorMessage(getSortHeaderMissingIdError()));
   });
 
+  it('should throw an error if the provided direction is invalid', () => {
+    expect(() => TestBed.createComponent(MatSortableInvalidDirection).detectChanges())
+        .toThrowError(wrappedErrorMessage(getSortInvalidDirectionError('ascending')));
+  });
+
   it('should allow let MatSortable override the default sort parameters', () => {
     testSingleColumnSortDirectionSequence(
         fixture, ['asc', 'desc', '']);
@@ -333,3 +340,13 @@ class MatSortDuplicateMatSortableIdsApp { }
   `
 })
 class MatSortableMissingIdApp { }
+
+
+@Component({
+  template: `
+    <div matSort matSortDirection="ascending">
+      <div mat-sort-header="a"> A </div>
+    </div>
+  `
+})
+class MatSortableInvalidDirection { }

src/lib/sort/sort.ts

@@ -6,10 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, EventEmitter, Input, Output} from '@angular/core';
+import {Directive, EventEmitter, Input, isDevMode, Output} from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SortDirection} from './sort-direction';
-import {getSortDuplicateSortableIdError, getSortHeaderMissingIdError} from './sort-errors';
+import {
+  getSortInvalidDirectionError,
+  getSortDuplicateSortableIdError,
+  getSortHeaderMissingIdError
+} from './sort-errors';
 
 export interface MatSortable {
   id: string;
@@ -40,7 +44,15 @@ export class MatSort {
   @Input('matSortStart') start: 'asc' | 'desc' = 'asc';
 
   /** The sort direction of the currently active MatSortable. */
-  @Input('matSortDirection') direction: SortDirection = '';
+  @Input('matSortDirection')
+  set direction(direction: SortDirection) {
+    if (isDevMode() && direction && direction !== 'asc' && direction !== 'desc') {
+      throw getSortInvalidDirectionError(direction);
+    }
+    this._direction = direction;
+  }
+  get direction(): SortDirection { return this._direction; }
+  private _direction: SortDirection = '';
 
   /**
    * Whether to disable the user from clearing the sort by finishing the sort direction cycle.