diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts index de3c5c6a0f60..54f366aaa0df 100644 --- a/src/cdk/table/cell.ts +++ b/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. */ diff --git a/src/lib/sort/BUILD.bazel b/src/lib/sort/BUILD.bazel index a79df2c4f5bb..fd6b2eaff6ee 100644 --- a/src/lib/sort/BUILD.bazel +++ b/src/lib/sort/BUILD.bazel @@ -14,7 +14,6 @@ ng_module( "@angular//packages/core", "@rxjs", "//src/cdk/coercion", - "//src/cdk/table", "//src/lib/core", ], ) diff --git a/src/lib/sort/sort-header.ts b/src/lib/sort/sort-header.ts index a6d93b0277e6..7cd2db0cc31d 100644 --- a/src/lib/sort/sort-header.ts +++ b/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. diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts index 9bf871264672..e43707a0c7d4 100644 --- a/src/lib/table/cell.ts +++ b/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. */