change host binding to @HostBinding

Author: annieyw

src/cdk/tree/nested-node.ts

@@ -10,6 +10,7 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
+  HostBinding,
   IterableDiffer,
   IterableDiffers,
   OnDestroy,
@@ -31,17 +32,15 @@ import {getTreeControlFunctionsMissingError} from './tree-errors';
 @Directive({
   selector: 'cdk-nested-tree-node',
   exportAs: 'cdkNestedTreeNode',
-  host: {
-    '[attr.aria-expanded]': 'isExpanded',
-    '[attr.role]': 'role',
-    'class': 'cdk-tree-node cdk-nested-tree-node',
-  },
   providers: [
     {provide: CdkTreeNode, useExisting: CdkNestedTreeNode},
     {provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode}
   ]
 })
 export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContentInit, OnDestroy {
+  @HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
+  @HostBinding('attr.role') _role = this.role;
+
   /** Differ used to find the changes in the data provided by the data source. */
   private _dataDiffer: IterableDiffer<T>;
 
@@ -60,6 +59,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
               protected _tree: CdkTree<T>,
               protected _differs: IterableDiffers) {
     super(_elementRef, _tree);
+    this._elementRef.nativeElement.classList.add('cdk-tree-node', 'cdk-nested-tree-node');
   }
 
   ngAfterContentInit() {

src/cdk/tree/tree.ts

@@ -15,6 +15,7 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
+  HostBinding,
   Input,
   IterableChangeRecord,
   IterableDiffer,
@@ -55,10 +56,6 @@ import {
   selector: 'cdk-tree',
   exportAs: 'cdkTree',
   template: `<ng-container cdkTreeNodeOutlet></ng-container>`,
-  host: {
-    'class': 'cdk-tree',
-    'role': 'tree',
-  },
   encapsulation: ViewEncapsulation.None,
 
   // The "OnPush" status for the `CdkTree` component is effectively a noop, so we are removing it.
@@ -68,6 +65,8 @@ import {
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
+  @HostBinding('attr.role') _role = 'tree';
+
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
 
@@ -128,7 +127,10 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
     new BehaviorSubject<{start: number, end: number}>({start: 0, end: Number.MAX_VALUE});
 
   constructor(private _differs: IterableDiffers,
-              private _changeDetectorRef: ChangeDetectorRef) {}
+              private _changeDetectorRef: ChangeDetectorRef,
+              private _elementRef: ElementRef<HTMLElement>) {
+    this._elementRef.nativeElement.classList.add('cdk-tree');
+  }
 
   ngOnInit() {
     this._dataDiffer = this._differs.find([]).create(this.trackBy);
@@ -297,13 +299,14 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
 @Directive({
   selector: 'cdk-tree-node',
   exportAs: 'cdkTreeNode',
-  host: {
-    '[attr.aria-expanded]': 'isExpanded',
-    '[attr.role]': 'role',
-    'class': 'cdk-tree-node',
-  },
 })
 export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
+  /**
+   * The role of the node should always be 'treeitem'.
+   */
+    // TODO: mark as deprecated
+  @HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
+
   /**
    * The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
    * in `CdkTree` and set the data to it.
@@ -329,26 +332,22 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
   }
   protected _data: T;
 
-  get isExpanded(): boolean {
+  @HostBinding('attr.aria-expanded') get isExpanded(): boolean {
     return this._tree.treeControl.isExpanded(this._data);
   }
 
   get level(): number {
-   // Retrieve the aria-level of the parent node because level from treeControl is 0 indexed and
-   // aria-level is 1 indexed
+   // If the treeControl has a getLevel method, use it to get the level. Otherwise read the
+   // aria-level off the parent node and use it as the level for this node (note aria-level is
+   // 1-indexed, while this property is 0-indexed, so we don't need to increment).
    return this._tree.treeControl.getLevel ?
      this._tree.treeControl.getLevel(this._data) : this._parentNodeAriaLevel;
    }
 
-  /**
-   * The role of the node should always be 'treeitem'.
-   */
-  // TODO: mark as deprecated
-  @Input() role: 'treeitem' | 'group' = 'treeitem';
-
   constructor(protected _elementRef: ElementRef<HTMLElement>,
               protected _tree: CdkTree<T>) {
     CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T>;
+    this._elementRef.nativeElement.classList.add('cdk-tree-node');
   }
 
   ngOnInit(): void {

src/material/tree/node.ts

@@ -18,6 +18,7 @@ import {
   Attribute,
   Directive,
   ElementRef,
+  HostBinding,
   Input,
   IterableDiffers,
   OnDestroy,
@@ -42,23 +43,21 @@ const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNo
   selector: 'mat-tree-node',
   exportAs: 'matTreeNode',
   inputs: ['disabled', 'tabIndex'],
-  host: {
-    '[attr.aria-expanded]': 'isExpanded',
-    '[attr.role]': 'role',
-    'class': 'mat-tree-node'
-  },
   providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
 })
 export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
     implements CanDisable, HasTabIndex {
-  @Input() role: 'treeitem' | 'group' = 'treeitem';
+  @HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
+
+  @HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
               protected _tree: CdkTree<T>,
               @Attribute('tabindex') tabIndex: string) {
     super(_elementRef, _tree);
 
     this.tabIndex = Number(tabIndex) || 0;
+    this._elementRef.nativeElement.classList.add('mat-tree-node');
   }
 
   static ngAcceptInputType_disabled: BooleanInput;
@@ -85,11 +84,6 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
 @Directive({
   selector: 'mat-nested-tree-node',
   exportAs: 'matNestedTreeNode',
-  host: {
-    '[attr.aria-expanded]': 'isExpanded',
-    '[attr.role]': 'role',
-    'class': 'mat-nested-tree-node',
-  },
   providers: [
     {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
     {provide: CdkTreeNode, useExisting: MatNestedTreeNode},
@@ -98,6 +92,9 @@ 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. */
@@ -121,6 +118,7 @@ export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterC
               @Attribute('tabindex') tabIndex: string) {
     super(_elementRef, _tree, _differs);
     this.tabIndex = Number(tabIndex) || 0;
+    this._elementRef.nativeElement.classList.add('mat-nested-tree-node');
   }
 
   // This is a workaround for https://github.com/angular/angular/issues/23091

src/material/tree/tree.ts

@@ -7,7 +7,16 @@
  */
 
 import {CdkTree} from '@angular/cdk/tree';
-import {ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  HostBinding,
+  IterableDiffers,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import {MatTreeNodeOutlet} from './outlet';
 
 /**
@@ -17,10 +26,6 @@ import {MatTreeNodeOutlet} from './outlet';
   selector: 'mat-tree',
   exportAs: 'matTree',
   template: `<ng-container matTreeNodeOutlet></ng-container>`,
-  host: {
-    'class': 'mat-tree',
-    'role': 'tree',
-  },
   styleUrls: ['tree.css'],
   encapsulation: ViewEncapsulation.None,
   // See note on CdkTree for explanation on why this uses the default change detection strategy.
@@ -29,6 +34,15 @@ 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;
+
+  constructor(_differs: IterableDiffers,
+              _changeDetectorRef: ChangeDetectorRef,
+              _elementRef: ElementRef<HTMLElement>) {
+    super(_differs, _changeDetectorRef, _elementRef);
+    _elementRef.nativeElement.classList.add('mat-tree');
+  }
 }