@@ -13,9 +13,8 @@ import {
13
13
ChangeDetectorRef ,
14
14
Component ,
15
15
ContentChildren ,
16
- Directive ,
16
+ Directive , DoCheck ,
17
17
ElementRef ,
18
- HostBinding ,
19
18
Input ,
20
19
IterableChangeRecord ,
21
20
IterableDiffer ,
@@ -303,15 +302,17 @@ export class CdkTree<T> implements AfterContentChecked, CollectionViewer, OnDest
303
302
selector : 'cdk-tree-node' ,
304
303
exportAs : 'cdkTreeNode' ,
305
304
} )
306
- export class CdkTreeNode < T > implements FocusableOption , OnDestroy , OnInit {
307
- // TODO: mark as deprecated
305
+ export class CdkTreeNode < T > implements DoCheck , FocusableOption , OnDestroy , OnInit {
308
306
/**
309
307
* The role of the tree node.
308
+ * @deprecated The correct role is 'treeitem', 'group' should not be used. This input will be
309
+ * removed in a future version.
310
+ * @breaking -change 12.0.0 Remove this input
310
311
*/
311
312
@Input ( ) get role ( ) : 'treeitem' | 'group' { return 'treeitem' ; }
312
313
313
314
set role ( _role : 'treeitem' | 'group' ) {
314
- // TODO: move to host
315
+ // TODO: move to host after View Engine deprecation
315
316
this . _elementRef . nativeElement . setAttribute ( 'role' , _role ) ;
316
317
}
317
318
@@ -340,16 +341,17 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
340
341
}
341
342
protected _data : T ;
342
343
343
- // tslint:disable-next-line:no-host-decorator-in-concrete
344
- @HostBinding ( 'attr.aria-expanded' )
345
344
get isExpanded ( ) : boolean {
346
345
return this . _tree . treeControl . isExpanded ( this . _data ) ;
347
346
}
348
347
349
348
set isExpanded ( _expanded : boolean ) {
349
+ this . _expanded = _expanded ;
350
350
this . _elementRef . nativeElement . setAttribute ( 'aria-expanded' , `${ _expanded } ` ) ;
351
351
}
352
352
353
+ protected _expanded : boolean ;
354
+
353
355
get level ( ) : number {
354
356
// If the treeControl has a getLevel method, use it to get the level. Otherwise read the
355
357
// aria-level off the parent node and use it as the level for this node (note aria-level is
@@ -364,6 +366,7 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
364
366
// The classes are directly added here instead of in the host property because classes on
365
367
// the host property are not inherited with View Engine. It is not set as a @HostBinding because
366
368
// it is not set by the time it's children nodes try to read the class from it.
369
+ // TODO: move to host after View Engine deprecation
367
370
this . _elementRef . nativeElement . classList . add ( 'cdk-tree-node' ) ;
368
371
this . role = 'treeitem' ;
369
372
this . isExpanded = this . isExpanded ;
@@ -374,6 +377,16 @@ export class CdkTreeNode<T> implements FocusableOption, OnDestroy, OnInit {
374
377
this . _elementRef . nativeElement . setAttribute ( 'aria-level' , `${ this . level + 1 } ` ) ;
375
378
}
376
379
380
+ ngDoCheck ( ) {
381
+ // aria-expanded is be set here because the expanded state is stored in the tree control and
382
+ // the node isn't aware when the state is changed.
383
+ // It is not set using a @HostBinding because they sometimes get lost with Mixin based classes.
384
+ // TODO: move to host after View Engine deprecation
385
+ if ( this . isExpanded != this . _expanded ) {
386
+ this . isExpanded = this . isExpanded ;
387
+ }
388
+ }
389
+
377
390
ngOnDestroy ( ) {
378
391
// If this is the last tree node being destroyed,
379
392
// clear out the reference to avoid leaking memory.
0 commit comments