Does mat-tree support MatNestedTreeNode.level property?

[sdwske]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/components-issue-dew9or

Steps to reproduce:

1. Just look at console log after it (tree) loads. Contents of the tree are not a subject of the issue - only the console error.

ERROR TypeError: "_co.treeControl.getLevel is not a function"

Expected Behavior

API notes presence of level property - for both flat and nested nodes.
https://material.angular.io/components/tree/api#MatNestedTreeNode
treeControl.getLevel(dataNode) should be able to retrieve it, right?

Actual Behavior

Using:

{{treeControl.getLevel(dataNode)}}

...is apparently broken? Or not documented well.
I've also tried accessing "level" property through:

@ViewChildren(MatNestedTreeNode)
nestedNodes: QueryList<MatNestedTreeNode<Privilege>>;

...but it always returns 0, no matter when or what node You ask.

It seems like level property is never set, nor supported by treeControl.

Should or will level property be supported in nested nodes?

Environment

• Angular: 8.2.14
• CDK/Material: 8.2.3
• Browser(s): Any/All (tested on Firefox)
• Operating System (e.g. Windows, macOS, Ubuntu): Any/All

[tommyc38]

I can't get this to work either. All I get is zero for my depth level.

https://stackblitz.com/edit/angular-hqesji

#10872

[tommyc38]

To the Angular Material team and anyone else, I wrote a recursive function to attach the depth level to each node so I can access it in the template (e.g. _initNavMenu). In addition, I wanted to be able to have some other data so I could do the following for a navigation side menu:

• show styling breadcrumbs for active nested links (the routerLinkActive Directive won't work because my parent nodes aren't links.)
• aggregate badge notifications on parent nodes when collapsed and hide them when expanded
• expand all parent nodes of the node with the active routerLink when the menu is initialized.

interface DataModel{
   id?: number | string;
   level?: number;
   parent?: DataModel;
   badge?: string | number;
   badgeAgg?: number;
   routerLink?: any;
   items?: DataModel[];

   //... other props
}

const NESTED_DATA_LEVEL_TWO: DataModel[] = [
{label: 'Level Two - One', routerLink: 'active-route' ,badge: 3 ,id:null, parent: null, items:null},
{label: 'Level Two - Two', routerLink: 'void' ,badge: 6, id:null, parent: null, items:null},
{label: 'Level Two - Three', routerLink: 'void' , id:null, parent: null, items:null}
]
const NESTED_DATA_LEVEL_ONE: DataModel[] = [
{label: 'Level One - Parent', id:null, parent: null, items:NESTED_DTAT_LEVEL_TWO},
{label: 'Level One - Two', routerLink: 'void' , badge: 15, id:null, parent: null, items:null},
{label: 'Level One - Three', routerLink: 'void',badge: 45 ,id:null, parent: null, items:null}
]
const SAMPLE_DATA: DataModel[] = [
{label: 'Level Zero - Parent', id:null, parent: null, items:NESTED_DTAT_LEVEL_ONE},
{label: 'Level Zero - Two', routerLink: 'void' , badge: 9, id:null, parent: null, items:null},
{label: 'Level Zero - Three', routerLink: 'void',badge: 11, id:null, parent: null, items:null}
]


let id = 0; 

@Component({
  selector: 'side-nav',
  changeDetection: ChangeDetectionStrategy.OnPush,

   //... other meta data
})
export class SideNavComponent implements OnInit {

activeNodeMap: object;  
treeControl = new NestedTreeControl<DataModel>(node => node.items); 
_urlChanges = Subscription.EMPTY;
_activeUrl:string;

_data:DataModel[];
@Input() set data(value: DataModel[]){
   this._initNavMenu(value); 
   if(this._activeUrl) this._mapActiveNodes(value, false);
   this._data = value;
 }

constructor(public router: Router, public cdr: ChangeDetectorRef){}

 ngOnInit() {
    let isInitialRoute = true;
    this._urlChanges = this.router.events
      .pipe( filter(event => event instanceof NavigationEnd))
      .subscribe((event: NavigationEnd) => {
       this._activeUrl = event.url;
        if (isInitialRoute) {
          isInitialRoute = false;
          this._mapActiveNodes(event.url);
        } else {
           this._mapActiveNodes(event.url, false);
        }
        this.cdr.markForCheck();
      });

 }

 _hasChild = (_: number, node: any) => !!node.items && node.items.length > 0;

 _trackByFn(node) {
    return node.id;
  }

/** Setup IDs for trackByFn, find each node's depth level, and aggregate badge
  * notifications on parent nodes. */

 _initNavMenu(data: DataModel[], depth = 0, parent = null){

     for (let i = 0; i < items.length; i++) {
     const item = items[i];
     if (!item.id) item.id = id++;
     item.level = depth;
     if(item.badge && parent){
       const coerceNum = typeof item.badge === 'number'? item.badge : Number(item.badge);
       if(coerceNum) parent.badgeAgg += coerceNum;
     }
     item.parent = parent;
     if (item.items) {
        item.badgeAgg = 0;
        this._initNavMenu(item.items, depth + 1, item);
         if(item.parent)item.parent.badgeAgg += item.badgeAgg;
      }
   }
 }

 /** Create a map of all the active parent nodes in the chain to the active link, inclusive. 
   * Optionally expand the active nodes.  */

 _mapActiveNodes(url: string, expand: boolean = true){

    let matchFound = false;
    let matchedNode;

   // this only finds the node who's routerLink matches the url input.
    const findActiveNode = (items: any[]) => {
      for (let i = 0; i < items.length; i++) {
        if (matchFound) break;
        const item = items[i];
        if (item.routerLink && item.routerLink === url) {
          matchFound = true;
          matchedNode = item;
        }
        if (item.items) {
          findActiveNode(item.items);
        }
      }
    };
    findActiveNode(this._data);

    const activeNodes = [matchedNode];
   
   // find all parents of the node who's routerLink matches the url input.
    while (!!matchedNode.parent) {
      activeNodes.push(matchedNode.parent);
      if (expand) this.treeControl.expand(matchedNode.parent);
      matchedNode = matchedNode.parent;
    }

  // query this object in your template to add styling breadcrumbs
   this.activeNodeMap = {};
    activeNodes.forEach( node => this.activeNodeMap[node.id] = true);
 }
}

[jasedwards]

This is actually a regression I think. Not having level as a property in the previous version of the cdk allowed me to create a pipe to add it myself. Once I upgraded to version 9.x my pipe was overwritten with 0 for all of the levels. Since the aria-level is used to style the tree in my repo this broke all styling. For a11y puposes it should not matter if this is 'nested' or 'flat'. The correct level is still preferred.

[crisbeto]

@jasedwards what was the last version where aria-level worked correctly for you? Looking through the git blame, the aria-level related code hasn't been touched in at least 2 years.

[jasedwards]

@crisbeto I know it worked for 8.2.0 so I am assuming it was in the change to 9.x. I am not certain of exactly when it broke as it was an internal app that had the issue so had not used it for a few weeks. I was just setting it as [attr.aria-level]=... Is it possible that angualr 8 -> 9 changed the timing for setting host variables vs. template variables?

[crisbeto]

@annieyw do you know if your changes from #20226 will resolve this issue too?

[annieyw]

#20226 should resolve this issue and add aria-level for nested nodes too

[annieyw]

Closing because it seems like the issue was resolved.