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
1
-
Can you please show what you have tried till now?Minal Shah– Minal Shah2020-07-22 14:17:03 +00:00Commented Jul 22, 2020 at 14:17
Add a comment
|
1 Answer
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>
3 Comments
Eren Jaeger
try this solution but the path is undefined when adding it to the object, if the path put it in the routerlink of the html if navigation works, also when adding that property path the path and route are displayed in the view as an option of the node in any case should be hidden
Minal Shah
Have you added one more field in the model for path? And in html you can also call the method for navigating to the desired path.
Eren Jaeger
yes this.router.navigate works for me !! add a click event in the mat-tree-node send the node I receive it as an argument in a method in the ts! thank you very much for your help