CODEWITHSUNDEEP
angulartreeangular-material
Eren Jaeger
Eren Jaeger

Reputation: 57

how add navigation in menu tree angular material

hello I have a sidebar component which must have a menu tree that allows navigating between the pages, so I thought to use angular material tree since the project is in material, I need that when seeing the options of a node you can navigate to that view , I know that with routerlink in the html it is possible but since the tree loads the data is from the .ts, the menu is static they will always do the same options this is the example most similar to what I want from time to time. but I need the navigation in the node options

https://stackblitz.com/edit/angular-qsb9c8-x4oaan

Upvotes: 0

Views: 5901

Answers (1)

Minal Shah
Minal Shah

Reputation: 1486

As per my understanding you want to visit the pages by clicking on the menu items.

So for that you can maintain the paths in the object itself which you are using in the for loop. As per the example you have used. I am showing you the updated object that you have to replace.

export class FileNode {
  children: FileNode[];
  filename: string;
  type: any;
  path:string;
}

Applications: {
    Calendar: 'app',
    Chrome: 'app',
    Webstorm: 'app',
    path:'abc'
  }

And you can use this path in the html for routing purpose. Here I am showing you the example that you can refer.

 <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
    <li class="mat-tree-node">
         <a  [routerLink]="[node?.path]">
      {{node.filename}}:  {{node.type}}</a>
    </li>
  </mat-tree-node>

Upvotes: 2

Related Questions