use host:{} for mat tree and hostbinding for cdk tree

Author: annieyw

src/cdk/tree/nested-node.ts

@@ -38,6 +38,7 @@ import {getTreeControlFunctionsMissingError} from './tree-errors';
   ]
 })
 export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContentInit, OnDestroy {
+  // tslint:disable:no-host-decorator-in-concrete
   @HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
   @HostBinding('attr.role') _role = this.role;
 

src/cdk/tree/tree.ts

@@ -65,6 +65,7 @@ import {
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+  // tslint:disable:no-host-decorator-in-concrete
   @HostBinding('attr.role') _role = 'tree';
 
   /** Subject that emits when the component has been destroyed. */
@@ -304,7 +305,8 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   /**
    * The role of the node should always be 'treeitem'.
    */
-    // TODO: mark as deprecated
+   // TODO: mark as deprecated
+   // tslint:disable:no-host-decorator-in-concrete
   @HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
 
   /**
@@ -332,6 +334,7 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   }
   protected _data: T;
 
+  // tslint:disable:no-host-decorator-in-concrete
   @HostBinding('attr.aria-expanded') get isExpanded(): boolean {
     return this._tree.treeControl.isExpanded(this._data);
   }
@@ -388,13 +391,11 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
     }
     if (!parent) {
       throw Error('Incorrect tree structure containing detached node.');
-    }
-    if (parent.classList.contains('cdk-nested-tree-node')) {
+    } else if (parent.classList.contains('cdk-nested-tree-node')) {
       return parseInt(parent.getAttribute('aria-level')!);
-    } else if (parent.classList.contains('cdk-tree')) {
-      return 0;
     } else {
-      throw Error(`Incorrect tree structure containing ${parent.className}.`);
+      // parent.classList.contains('cdk-tree')
+      return 0;
     }
   }
 }

src/material/tree/node.ts

@@ -18,7 +18,6 @@ import {
   Attribute,
   Directive,
   ElementRef,
-  HostBinding,
   Input,
   IterableDiffers,
   OnDestroy,
@@ -43,13 +42,16 @@ const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNo
   selector: 'mat-tree-node',
   exportAs: 'matTreeNode',
   inputs: ['disabled', 'tabIndex'],
+  host: {
+    '[attr.aria-expanded]': 'isExpanded',
+    '[attr.role]': 'role',
+  },
   providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
 })
 export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
     implements CanDisable, HasTabIndex {
-  @HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
+  @Input() role: 'treeitem' | 'group' = 'treeitem';
 
-  @HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
               protected _tree: CdkTree<T>,
@@ -84,6 +86,10 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
 @Directive({
   selector: 'mat-nested-tree-node',
   exportAs: 'matNestedTreeNode',
+  host: {
+    '[attr.aria-expanded]': 'isExpanded',
+    '[attr.role]': 'role',
+  },
   providers: [
     {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
     {provide: CdkTreeNode, useExisting: MatNestedTreeNode},
@@ -92,9 +98,6 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
 })
 export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterContentInit,
   OnDestroy {
-  @HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
-  @HostBinding('attr.role') _role = this.role;
-
   @Input('matNestedTreeNode') node: T;
 
   /** Whether the node is disabled. */

src/material/tree/tree.ts

@@ -12,7 +12,6 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
-  HostBinding,
   IterableDiffers,
   ViewChild,
   ViewEncapsulation
@@ -26,6 +25,9 @@ import {MatTreeNodeOutlet} from './outlet';
   selector: 'mat-tree',
   exportAs: 'matTree',
   template: `<ng-container matTreeNodeOutlet></ng-container>`,
+  host: {
+    'role': 'tree',
+  },
   styleUrls: ['tree.css'],
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTree for explanation on why this uses the default change detection strategy.
@@ -34,8 +36,6 @@ import {MatTreeNodeOutlet} from './outlet';
   providers: [{provide: CdkTree, useExisting: MatTree}]
 })
 export class MatTree<T> extends CdkTree<T> {
-  @HostBinding('attr.role') _role = 'tree';
-
   // Outlets within the tree's template where the dataNodes will be inserted.
   @ViewChild(MatTreeNodeOutlet, {static: true}) _nodeOutlet: MatTreeNodeOutlet;
 

tools/public_api_guard/cdk/tree.d.ts

@@ -24,6 +24,8 @@ export declare class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements Afte
     protected _children: T[];
     protected _differs: IterableDiffers;
     protected _elementRef: ElementRef<HTMLElement>;
+    _expanded: boolean;
+    _role: "treeitem" | "group";
     protected _tree: CdkTree<T>;
     nodeOutlet: QueryList<CdkTreeNodeOutlet>;
     constructor(_elementRef: ElementRef<HTMLElement>, _tree: CdkTree<T>, _differs: IterableDiffers);
@@ -38,6 +40,7 @@ export declare class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements Afte
 export declare class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
     _nodeDefs: QueryList<CdkTreeNodeDef<T>>;
     _nodeOutlet: CdkTreeNodeOutlet;
+    _role: string;
     get dataSource(): DataSource<T> | Observable<T[]> | T[];
     set dataSource(dataSource: DataSource<T> | Observable<T[]> | T[]);
     trackBy: TrackByFunction<T>;
@@ -46,7 +49,7 @@ export declare class CdkTree<T> implements AfterContentChecked, CollectionViewer
         start: number;
         end: number;
     }>;
-    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef);
+    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
     _getNodeDef(data: T, i: number): CdkTreeNodeDef<T>;
     insertNode(nodeData: T, index: number, viewContainer?: ViewContainerRef, parentData?: T): void;
     ngAfterContentChecked(): void;

tools/public_api_guard/material/tree.d.ts

@@ -17,6 +17,7 @@ export declare class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implement
 
 export declare class MatTree<T> extends CdkTree<T> {
     _nodeOutlet: MatTreeNodeOutlet;
+    constructor(_differs: IterableDiffers, _changeDetectorRef: ChangeDetectorRef, _elementRef: ElementRef<HTMLElement>);
     static ɵcmp: i0.ɵɵComponentDefWithMeta<MatTree<any>, "mat-tree", ["matTree"], {}, {}, never, never>;
     static ɵfac: i0.ɵɵFactoryDef<MatTree<any>, never>;
 }