change host binding to @HostBinding

Author: annieyw

src/cdk/tree/nested-node.ts

@@ -9,7 +9,7 @@ import {
   AfterContentInit,
   ContentChildren,
   Directive,
-  ElementRef,
+  ElementRef, HostBinding,
   IterableDiffer,
   IterableDiffers,
   OnDestroy,
@@ -31,17 +31,16 @@ 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;
+  @HostBinding('class') _class = 'cdk-tree-node cdk-nested-tree-node';
+
   /** Differ used to find the changes in the data provided by the data source. */
   private _dataDiffer: IterableDiffer<T>;
 

src/cdk/tree/tree.ts

@@ -15,6 +15,7 @@ import {
   ContentChildren,
   Directive,
   ElementRef,
+  HostBinding,
   Input,
   IterableChangeRecord,
   IterableDiffer,
@@ -297,13 +298,15 @@ 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';
+  @HostBinding('class') _class = 'cdk-tree-node';
+
   /**
    * 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,7 +332,7 @@ 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);
   }
 
@@ -340,18 +343,13 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
      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>;
   }
 
   ngOnInit(): void {
+    debugger;
     this._parentNodeAriaLevel = this._getParentNodeAriaLevel();
     this._elementRef.nativeElement.setAttribute('aria-level', String(this.level + 1));
   }

src/material/tree/node.ts

@@ -18,6 +18,7 @@ import {
   Attribute,
   Directive,
   ElementRef,
+  HostBinding,
   Input,
   IterableDiffers,
   OnDestroy,
@@ -42,16 +43,14 @@ 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;
+  @HostBinding('class') _class = 'mat-tree-node';
 
   constructor(protected _elementRef: ElementRef<HTMLElement>,
               protected _tree: CdkTree<T>,
@@ -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,10 @@ 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;
+  @HostBinding('class') _class = 'mat-nested-tree-node';
+
   @Input('matNestedTreeNode') node: T;
 
   /** Whether the node is disabled. */

src/material/tree/tree.ts

@@ -7,7 +7,13 @@
  */
 
 import {CdkTree} from '@angular/cdk/tree';
-import {ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 import {MatTreeNodeOutlet} from './outlet';
 
 /**