title: How to add links to the angular material tree
body: <p>I am creating a navigation menu, based on the tree complement that offers angular material. I have taken as example the following tree with node for my menu</p>
  <p><a href="https://run.stackblitz.com/api/angular/v1?file=src%2Fapp%2Ftree-flat-overview-example.ts" rel="nofollow noreferrer">Example Stackblitz</a></p>
  <p>But, reading in the documentation of the same component, I do not find very well where to add the routes, in this case those of my application.</p>
  <p>my html</p>
  <pre><code>&lt;zonasegura-header&gt;&lt;/zonasegura-header&gt;
  &lt;mat-sidenav-container class=&quot;example-container&quot;&gt;
      &lt;mat-sidenav #sidenav mode=&quot;side&quot; opened&gt;
  
      &lt;button mat-icon-button (click)=&quot;sidenav.toggle();iconoToggle=!iconoToggle&quot; class=&quot;menu-button btn-toggle&quot;&gt;
          &lt;mat-icon *ngIf=&quot;iconoToggle&quot;&gt;chevron_left&lt;/mat-icon&gt;
          &lt;mat-icon *ngIf=&quot;!iconoToggle&quot;&gt;chevron_right&lt;/mat-icon&gt;
      &lt;/button&gt;
  
      &lt;div class=&quot;wrapper&quot;&gt;
          &lt;nav id=&quot;sidebar&quot;&gt;
              &lt;div class=&quot;sidebar-header&quot;&gt;
                  &lt;img src=&quot;assets/images/img_p.png&quot; /&gt;
                  &lt;p&gt;Lucia Pérez&lt;/p&gt;
                  &lt;p&gt;IPS Admin&lt;/p&gt;
              &lt;/div&gt;
  
  
              &lt;mat-tree [dataSource]=&quot;dataSource&quot; [treeControl]=&quot;treeControl&quot;&gt;
                  &lt;!-- This is the tree node template for leaf nodes --&gt;
                  &lt;mat-tree-node *matTreeNodeDef=&quot;let node&quot; matTreeNodePadding&gt;
                    &lt;!-- use a disabled button to provide padding for tree leaf --&gt;
                    &lt;button mat-icon-button disabled&gt;&lt;/button&gt;
                    {{node.name}}
                  &lt;/mat-tree-node&gt;
                  &lt;!-- This is the tree node template for expandable nodes --&gt;
                  &lt;mat-tree-node *matTreeNodeDef=&quot;let node;when: hasChild&quot; matTreeNodePadding&gt;
                    &lt;button mat-icon-button matTreeNodeToggle
                            [attr.aria-label]=&quot;'Toggle ' + node.name&quot;&gt;
                      &lt;mat-icon class=&quot;mat-icon-rtl-mirror&quot;&gt;
                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
                      &lt;/mat-icon&gt;
                    &lt;/button&gt;
                    {{node.name}}
                  &lt;/mat-tree-node&gt;
                &lt;/mat-tree&gt;
  
  
              &lt;ul class=&quot;menu-final&quot;&gt;
                  &lt;li&gt;&lt;span class=&quot;material-icons&quot;&gt; account_box&lt;/span&gt;Ayuda y Soporte&lt;/li&gt;
                  &lt;li&gt;&lt;span class=&quot;material-icons&quot;&gt; account_box&lt;/span&gt;Cerrar Sesión&lt;/li&gt;
                  &lt;li&gt;&lt;span class=&quot;material-icons&quot;&gt; account_box&lt;/span&gt;Terminos Legales&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  
      &lt;/mat-sidenav&gt;
    
      &lt;mat-sidenav-content&gt;
          &lt;router-outlet&gt;&lt;/router-outlet&gt;
          &lt;zonasegura-footer&gt;&lt;/zonasegura-footer&gt;
      &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
  </code></pre>
  <p>layout.ts</p>
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { ChangeDetectorRef } from '@angular/core';
  import { MediaMatcher } from '@angular/cdk/layout';
  import { MatSidenav } from '@angular/material/sidenav';
  import { FlatTreeControl } from '@angular/cdk/tree';
  import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
  
  /**
   * Food data with nested structure.
   * Each node has a name and an optional list of children.
   */
  interface FoodNode {
    name: string;
    children?: FoodNode[];
  }
  
  const TREE_DATA: FoodNode[] = [
    {
      name: 'Fruit',
      children: [
        {name: 'Apple'},
        {name: 'Banana'},
        {name: 'Fruit loops'},
      ]
    }, {
      name: 'Vegetables',
      children: [
        {
          name: 'Green',
          children: [
            {name: 'Broccoli'},
            {name: 'Brussels sprouts'},
          ]
        }, {
          name: 'Orange',
          children: [
            {name: 'Pumpkins'},
            {name: 'Carrots'},
          ]
        },
      ]
    },
  ];
  
  /** Flat node with expandable and level information */
  interface ExampleFlatNode {
    expandable: boolean;
    name: string;
    level: number;
  }
  
  /**
   * @title Tree with flat nodes
   */
  
  @Component({
    selector: 'zonasegura-layout',
    templateUrl: './layout.component.html',
    styleUrls: ['./layout.component.scss']
  })
  export class LayoutComponent implements OnInit {
  
    iconoToggle: boolean = true;
  /*
    events: string[] = [];
    opened: boolean;
  
    @ViewChild('sidenav') sidenav: MatSidenav;
    
    isExpanded = true;
    isShowing = false;
  
  
    mobileQuery: MediaQueryList;
    private _mobileQueryListener: () =&gt; void;
  
    constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
      this.mobileQuery = media.matchMedia('(max-width: 600px)');
      this._mobileQueryListener = () =&gt; changeDetectorRef.detectChanges();
      this.mobileQuery.addListener(this._mobileQueryListener);
    }
  
    ngOnDestroy(): void {
      this.mobileQuery.removeListener(this._mobileQueryListener);
    }
  */
    events: string[] = [];
    opened: boolean;
  
    //  constructor() { }
  
    private _transformer = (node: FoodNode, level: number) =&gt; {
      return {
        expandable: !!node.children &amp;&amp; node.children.length &gt; 0,
        name: node.name,
        level: level,
      };
    }
  
    treeControl = new FlatTreeControl&lt;ExampleFlatNode&gt;(
        node =&gt; node.level, node =&gt; node.expandable);
  
    treeFlattener = new MatTreeFlattener(
        this._transformer, node =&gt; node.level, node =&gt; node.expandable, node =&gt; node.children);
  
    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  
    constructor() {
      this.dataSource.data = TREE_DATA;
    }
  
    hasChild = (_: number, node: ExampleFlatNode) =&gt; node.expandable;
  
    ngOnInit(): void {
    }
  
  }
  
  </code></pre>