Skip to content

Commit ffff172

Browse files
committed
change host binding to @HostBinding
1 parent bf0a57a commit ffff172

File tree

4 files changed

+51
-40
lines changed

4 files changed

+51
-40
lines changed

src/cdk/tree/nested-node.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
ContentChildren,
1111
Directive,
1212
ElementRef,
13+
HostBinding,
1314
IterableDiffer,
1415
IterableDiffers,
1516
OnDestroy,
@@ -31,17 +32,15 @@ import {getTreeControlFunctionsMissingError} from './tree-errors';
3132
@Directive({
3233
selector: 'cdk-nested-tree-node',
3334
exportAs: 'cdkNestedTreeNode',
34-
host: {
35-
'[attr.aria-expanded]': 'isExpanded',
36-
'[attr.role]': 'role',
37-
'class': 'cdk-tree-node cdk-nested-tree-node',
38-
},
3935
providers: [
4036
{provide: CdkTreeNode, useExisting: CdkNestedTreeNode},
4137
{provide: CDK_TREE_NODE_OUTLET_NODE, useExisting: CdkNestedTreeNode}
4238
]
4339
})
4440
export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContentInit, OnDestroy {
41+
@HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
42+
@HostBinding('attr.role') _role = this.role;
43+
4544
/** Differ used to find the changes in the data provided by the data source. */
4645
private _dataDiffer: IterableDiffer<T>;
4746

@@ -60,6 +59,7 @@ export class CdkNestedTreeNode<T> extends CdkTreeNode<T> implements AfterContent
6059
protected _tree: CdkTree<T>,
6160
protected _differs: IterableDiffers) {
6261
super(_elementRef, _tree);
62+
this._elementRef.nativeElement.classList.add('cdk-tree-node', 'cdk-nested-tree-node');
6363
}
6464

6565
ngAfterContentInit() {

src/cdk/tree/tree.ts

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
ContentChildren,
1616
Directive,
1717
ElementRef,
18+
HostBinding,
1819
Input,
1920
IterableChangeRecord,
2021
IterableDiffer,
@@ -55,10 +56,6 @@ import {
5556
selector: 'cdk-tree',
5657
exportAs: 'cdkTree',
5758
template: `<ng-container cdkTreeNodeOutlet></ng-container>`,
58-
host: {
59-
'class': 'cdk-tree',
60-
'role': 'tree',
61-
},
6259
encapsulation: ViewEncapsulation.None,
6360

6461
// The "OnPush" status for the `CdkTree` component is effectively a noop, so we are removing it.
@@ -68,6 +65,8 @@ import {
6865
changeDetection: ChangeDetectionStrategy.Default
6966
})
7067
export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDestroy, OnInit {
68+
@HostBinding('attr.role') _role = 'tree';
69+
7170
/** Subject that emits when the component has been destroyed. */
7271
private _onDestroy = new Subject<void>();
7372

@@ -128,7 +127,10 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
128127
new BehaviorSubject<{start: number, end: number}>({start: 0, end: Number.MAX_VALUE});
129128

130129
constructor(private _differs: IterableDiffers,
131-
private _changeDetectorRef: ChangeDetectorRef) {}
130+
private _changeDetectorRef: ChangeDetectorRef,
131+
private _elementRef: ElementRef<HTMLElement>) {
132+
this._elementRef.nativeElement.classList.add('cdk-tree');
133+
}
132134

133135
ngOnInit() {
134136
this._dataDiffer = this._differs.find([]).create(this.trackBy);
@@ -297,13 +299,14 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
297299
@Directive({
298300
selector: 'cdk-tree-node',
299301
exportAs: 'cdkTreeNode',
300-
host: {
301-
'[attr.aria-expanded]': 'isExpanded',
302-
'[attr.role]': 'role',
303-
'class': 'cdk-tree-node',
304-
},
305302
})
306303
export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
304+
/**
305+
* The role of the node should always be 'treeitem'.
306+
*/
307+
// TODO: mark as deprecated
308+
@HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
309+
307310
/**
308311
* The most recently created `CdkTreeNode`. We save it in static variable so we can retrieve it
309312
* in `CdkTree` and set the data to it.
@@ -329,26 +332,22 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
329332
}
330333
protected _data: T;
331334

332-
get isExpanded(): boolean {
335+
@HostBinding('attr.aria-expanded') get isExpanded(): boolean {
333336
return this._tree.treeControl.isExpanded(this._data);
334337
}
335338

336339
get level(): number {
337-
// Retrieve the aria-level of the parent node because level from treeControl is 0 indexed and
338-
// aria-level is 1 indexed
340+
// If the treeControl has a getLevel method, use it to get the level. Otherwise read the
341+
// aria-level off the parent node and use it as the level for this node (note aria-level is
342+
// 1-indexed, while this property is 0-indexed, so we don't need to increment).
339343
return this._tree.treeControl.getLevel ?
340344
this._tree.treeControl.getLevel(this._data) : this._parentNodeAriaLevel;
341345
}
342346

343-
/**
344-
* The role of the node should always be 'treeitem'.
345-
*/
346-
// TODO: mark as deprecated
347-
@Input() role: 'treeitem' | 'group' = 'treeitem';
348-
349347
constructor(protected _elementRef: ElementRef<HTMLElement>,
350348
protected _tree: CdkTree<T>) {
351349
CdkTreeNode.mostRecentTreeNode = this as CdkTreeNode<T>;
350+
this._elementRef.nativeElement.classList.add('cdk-tree-node');
352351
}
353352

354353
ngOnInit(): void {

src/material/tree/node.ts

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
Attribute,
1919
Directive,
2020
ElementRef,
21+
HostBinding,
2122
Input,
2223
IterableDiffers,
2324
OnDestroy,
@@ -42,23 +43,21 @@ const _MatTreeNodeMixinBase: HasTabIndexCtor & CanDisableCtor & typeof CdkTreeNo
4243
selector: 'mat-tree-node',
4344
exportAs: 'matTreeNode',
4445
inputs: ['disabled', 'tabIndex'],
45-
host: {
46-
'[attr.aria-expanded]': 'isExpanded',
47-
'[attr.role]': 'role',
48-
'class': 'mat-tree-node'
49-
},
5046
providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
5147
})
5248
export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T>
5349
implements CanDisable, HasTabIndex {
54-
@Input() role: 'treeitem' | 'group' = 'treeitem';
50+
@HostBinding('attr.role') @Input() role: 'treeitem' | 'group' = 'treeitem';
51+
52+
@HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
5553

5654
constructor(protected _elementRef: ElementRef<HTMLElement>,
5755
protected _tree: CdkTree<T>,
5856
@Attribute('tabindex') tabIndex: string) {
5957
super(_elementRef, _tree);
6058

6159
this.tabIndex = Number(tabIndex) || 0;
60+
this._elementRef.nativeElement.classList.add('mat-tree-node');
6261
}
6362

6463
static ngAcceptInputType_disabled: BooleanInput;
@@ -85,11 +84,6 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
8584
@Directive({
8685
selector: 'mat-nested-tree-node',
8786
exportAs: 'matNestedTreeNode',
88-
host: {
89-
'[attr.aria-expanded]': 'isExpanded',
90-
'[attr.role]': 'role',
91-
'class': 'mat-nested-tree-node',
92-
},
9387
providers: [
9488
{provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
9589
{provide: CdkTreeNode, useExisting: MatNestedTreeNode},
@@ -98,6 +92,9 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
9892
})
9993
export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterContentInit,
10094
OnDestroy {
95+
@HostBinding('attr.aria-expanded') _expanded = this.isExpanded;
96+
@HostBinding('attr.role') _role = this.role;
97+
10198
@Input('matNestedTreeNode') node: T;
10299

103100
/** Whether the node is disabled. */
@@ -121,6 +118,7 @@ export class MatNestedTreeNode<T> extends CdkNestedTreeNode<T> implements AfterC
121118
@Attribute('tabindex') tabIndex: string) {
122119
super(_elementRef, _tree, _differs);
123120
this.tabIndex = Number(tabIndex) || 0;
121+
this._elementRef.nativeElement.classList.add('mat-nested-tree-node');
124122
}
125123

126124
// This is a workaround for https://github.com/angular/angular/issues/23091

src/material/tree/tree.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,16 @@
77
*/
88

99
import {CdkTree} from '@angular/cdk/tree';
10-
import {ChangeDetectionStrategy, Component, ViewChild, ViewEncapsulation} from '@angular/core';
10+
import {
11+
ChangeDetectionStrategy,
12+
ChangeDetectorRef,
13+
Component,
14+
ElementRef,
15+
HostBinding,
16+
IterableDiffers,
17+
ViewChild,
18+
ViewEncapsulation
19+
} from '@angular/core';
1120
import {MatTreeNodeOutlet} from './outlet';
1221

1322
/**
@@ -17,10 +26,6 @@ import {MatTreeNodeOutlet} from './outlet';
1726
selector: 'mat-tree',
1827
exportAs: 'matTree',
1928
template: `<ng-container matTreeNodeOutlet></ng-container>`,
20-
host: {
21-
'class': 'mat-tree',
22-
'role': 'tree',
23-
},
2429
styleUrls: ['tree.css'],
2530
encapsulation: ViewEncapsulation.None,
2631
// See note on CdkTree for explanation on why this uses the default change detection strategy.
@@ -29,6 +34,15 @@ import {MatTreeNodeOutlet} from './outlet';
2934
providers: [{provide: CdkTree, useExisting: MatTree}]
3035
})
3136
export class MatTree<T> extends CdkTree<T> {
37+
@HostBinding('attr.role') _role = 'tree';
38+
3239
// Outlets within the tree's template where the dataNodes will be inserted.
3340
@ViewChild(MatTreeNodeOutlet, {static: true}) _nodeOutlet: MatTreeNodeOutlet;
41+
42+
constructor(_differs: IterableDiffers,
43+
_changeDetectorRef: ChangeDetectorRef,
44+
_elementRef: ElementRef<HTMLElement>) {
45+
super(_differs, _changeDetectorRef, _elementRef);
46+
_elementRef.nativeElement.classList.add('mat-tree');
47+
}
3448
}

0 commit comments

Comments
 (0)