refactor(sort): remove sort header dependency on table (#13507)

Author: crisbeto

src/cdk/table/cell.ts

@@ -55,7 +55,11 @@ export const _CdkColumnDefBase: CanStickCtor & typeof CdkColumnDefBase =
  */
 @Directive({
   selector: '[cdkColumnDef]',
-  inputs: ['sticky']
+  inputs: ['sticky'],
+  providers: [{
+    provide: 'MAT_SORT_HEADER_COLUMN_DEF',
+    useExisting: CdkColumnDef
+  }],
 })
 export class CdkColumnDef extends _CdkColumnDefBase implements CanStick {
   /** Unique name for this column. */

src/lib/sort/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
     "@angular//packages/core",
     "@rxjs",
     "//src/cdk/coercion",
-    "//src/cdk/table",
     "//src/lib/core",
   ],
 )

src/lib/sort/sort-header.ts

@@ -7,7 +7,6 @@
  */
 
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {CdkColumnDef} from '@angular/cdk/table';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -17,6 +16,7 @@ import {
   OnInit,
   Optional,
   ViewEncapsulation,
+  Inject,
 } from '@angular/core';
 import {CanDisable, CanDisableCtor, mixinDisabled} from '@angular/material/core';
 import {merge, Subscription} from 'rxjs';
@@ -53,6 +53,11 @@ export interface ArrowViewStateTransition {
   toState: ArrowViewState;
 }
 
+/** Column definition associated with a `MatSortHeader`. */
+interface MatSortHeaderColumnDef {
+  name: string;
+}
+
 /**
  * Applies sorting behavior (click to change sort) and styles to an element, including an
  * arrow to display the current sort direction.
@@ -134,8 +139,12 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
   constructor(public _intl: MatSortHeaderIntl,
               changeDetectorRef: ChangeDetectorRef,
               @Optional() public _sort: MatSort,
-              @Optional() public _cdkColumnDef: CdkColumnDef) {
-
+              @Inject('MAT_SORT_HEADER_COLUMN_DEF') @Optional()
+                  public _columnDef: MatSortHeaderColumnDef) {
+    // Note that we use a string token for the `_columnDef`, because the value is provided both by
+    // `material/table` and `cdk/table` and we can't have the CDK depending on Material,
+    // and we want to avoid having the sort header depending on the CDK table because
+    // of this single reference.
     super();
 
     if (!_sort) {
@@ -159,8 +168,8 @@ export class MatSortHeader extends _MatSortHeaderMixinBase
   }
 
   ngOnInit() {
-    if (!this.id && this._cdkColumnDef) {
-      this.id = this._cdkColumnDef.name;
+    if (!this.id && this._columnDef) {
+      this.id = this._columnDef.name;
     }
 
     // Initialize the direction of the arrow and set the view state to be immediately that state.

src/lib/table/cell.ts

@@ -56,7 +56,10 @@ export class MatFooterCellDef extends _CdkFooterCellDef {}
  */
 @Directive({
   selector: '[matColumnDef]',
-  providers: [{provide: CdkColumnDef, useExisting: MatColumnDef}],
+  providers: [
+    {provide: CdkColumnDef, useExisting: MatColumnDef},
+    {provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef}
+  ],
 })
 export class MatColumnDef extends CdkColumnDef {
   /** Unique name for this column. */