diff --git a/src/material/tree/node.ts b/src/material/tree/node.ts index 3aed45c26d8e..d50ee5fef7eb 100644 --- a/src/material/tree/node.ts +++ b/src/material/tree/node.ts @@ -16,13 +16,11 @@ import { import { AfterContentInit, Attribute, - ContentChildren, Directive, ElementRef, Input, IterableDiffers, OnDestroy, - QueryList, } from '@angular/core'; import { CanDisable, @@ -32,16 +30,11 @@ import { mixinDisabled, mixinTabIndex, } from '@angular/material/core'; - -import {MatTreeNodeOutlet} from './outlet'; +import {coerceBooleanProperty} from '@angular/cdk/coercion'; const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNode = mixinTabIndex(mixinDisabled(CdkTreeNode)); -const _MatNestedTreeNodeMixinBase: - HasTabIndexCtor & CanDisableCtor & typeof CdkNestedTreeNode = - mixinTabIndex(mixinDisabled(CdkNestedTreeNode)); - /** * Wrapper for the CdkTree node with Material design styles. */ @@ -95,31 +88,36 @@ export class MatTreeNodeDef extends CdkTreeNodeDef { '[attr.role]': 'role', 'class': 'mat-nested-tree-node', }, - inputs: ['disabled', 'tabIndex'], providers: [ {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode}, {provide: CdkTreeNode, useExisting: MatNestedTreeNode}, {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: MatNestedTreeNode} ] }) -export class MatNestedTreeNode extends _MatNestedTreeNodeMixinBase implements - AfterContentInit, CanDisable, HasTabIndex, OnDestroy { +export class MatNestedTreeNode extends CdkNestedTreeNode implements AfterContentInit, + OnDestroy { @Input('matNestedTreeNode') node: T; - /** The children node placeholder. */ - @ContentChildren(MatTreeNodeOutlet, { - // We need to use `descendants: true`, because Ivy will no longer match - // indirect descendants if it's left as false. - descendants: true - }) - nodeOutlet: QueryList; + /** Whether the node is disabled. */ + @Input() + get disabled() { return this._disabled; } + set disabled(value: any) { this._disabled = coerceBooleanProperty(value); } + private _disabled = false; + + /** Tabindex for the node. */ + @Input() + get tabIndex(): number { return this.disabled ? -1 : this._tabIndex; } + set tabIndex(value: number) { + // If the specified tabIndex value is null or undefined, fall back to the default value. + this._tabIndex = value != null ? value : 0; + } + private _tabIndex: number; constructor(protected _elementRef: ElementRef, protected _tree: CdkTree, protected _differs: IterableDiffers, @Attribute('tabindex') tabIndex: string) { super(_elementRef, _tree, _differs); - this.tabIndex = Number(tabIndex) || 0; } diff --git a/src/material/tree/outlet.ts b/src/material/tree/outlet.ts index e2ad42c7266a..5c759d67d742 100644 --- a/src/material/tree/outlet.ts +++ b/src/material/tree/outlet.ts @@ -18,7 +18,11 @@ import { * inside the outlet. */ @Directive({ - selector: '[matTreeNodeOutlet]' + selector: '[matTreeNodeOutlet]', + providers: [{ + provide: CdkTreeNodeOutlet, + useExisting: MatTreeNodeOutlet + }] }) export class MatTreeNodeOutlet implements CdkTreeNodeOutlet { constructor( diff --git a/tools/public_api_guard/material/tree.d.ts b/tools/public_api_guard/material/tree.d.ts index 3a55f4234983..00945d163d3d 100644 --- a/tools/public_api_guard/material/tree.d.ts +++ b/tools/public_api_guard/material/tree.d.ts @@ -1,9 +1,10 @@ -export declare class MatNestedTreeNode extends _MatNestedTreeNodeMixinBase implements AfterContentInit, CanDisable, HasTabIndex, OnDestroy { +export declare class MatNestedTreeNode extends CdkNestedTreeNode implements AfterContentInit, OnDestroy { protected _differs: IterableDiffers; protected _elementRef: ElementRef; protected _tree: CdkTree; + disabled: any; node: T; - nodeOutlet: QueryList; + tabIndex: number; constructor(_elementRef: ElementRef, _tree: CdkTree, _differs: IterableDiffers, tabIndex: string); ngAfterContentInit(): void; ngOnDestroy(): void;