Adding routing for page navigation in angular tree

Question

I need help in adding route to angular tree.

HTML Code:

<mat-tree [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl">
     <mat-tree-node class="btnLinks" *matTreeNodeDef="let node" matTreeNodePadding>
      <button mat-icon-button disabled></button>
      {{node.name}}
    </mat-tree-node>
    <mat-tree-node class="btnLinks" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle
              [attr.aria-label]="'toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>
      {{node.name}}
    </mat-tree-node>
  </mat-tree>

.Ts file

interface ProfileList {
  name: string;
  children?: ProfileList[];
}

const PROFILE_DATA: ProfileList[] = [
  {
    name: 'General',
  }, 
  {
    name: 'Degrees',
  },
];

/** Flat node with expandable and level information */
interface TreeFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

@Component({
  selector: 'mpn-profile-landing',
  templateUrl: './profile-landing.component.html',
  styleUrls: ['./profile-landing.component.css']
})

export class ProfileLandingComponent {

  public selectedItem : String = '';

  constructor(private breakpointObserver: BreakpointObserver) {
    this.dataSource.data = PROFILE_DATA;
  }

private transformer = (node: ProfileList, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
    };
  }

I need to add routing like when I click on Degrees, I need to navigate to another page, I'm not sure where to place the router link. Is it possible to do this? Thank you.

OST · Accepted Answer · 2019-05-16 08:34:02Z

3

You can wrap the {{node.name}} with <span> like:

<span click="navigateToPage(node.name)">{{node.name}}</span>

then in your TS code add private router: Router to your constructor and add a method something like this:

constructor(
  private breakpointObserver: BreakpointObserver,
  private router: Router
) {
    this.dataSource.data = PROFILE_DATA;
}

navigateToPage(name: string) {
  if (name === 'Degrees') {
    this.router.navigate([<THE_ROUTE_YOU_WISH_TO_NAVIGATE_TO>]);
  }
}

edited May 16, 2019 at 8:34

answered May 16, 2019 at 8:19

OST

3685 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PremKumar Over a year ago

Thank you, I will try your solution. My solution was, I forgot to add url: node.url in private transformer and in HTML routerLink="{{node.url}}". Added full working code below.

PremKumar · Accepted Answer · 2019-05-16 11:03:51Z

My working solution:

HTML:

<mat-tree   [dataSource]="dataSource" class="tree-container" [treeControl]="treeControl">
        <!-- This is the tree node template for leaf nodes -->
        <mat-tree-node class="btnLinks" routerLink="{{node.url}}" routerLinkActive="active" *matTreeNodeDef="let node" matTreeNodePadding>
          <!-- use a disabled button to provide padding for tree leaf -->
          <button mat-icon-button disabled></button>
          {{node.name}}

        </mat-tree-node>
        <!-- This is the tree node template for expandable nodes -->
        <mat-tree-node class="btnLinks" routerLink="{{node.url}}" routerLinkActive="active" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
          <button mat-icon-button matTreeNodeToggle
                  [attr.aria-label]="'toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          {{node.name}}
        </mat-tree-node>
      </mat-tree>

.ts

interface TreeFlatNode {
  expandable: boolean;
  name: string;
  level: number;
}

/**
 * @title Tree with flat nodes
 */
@Component({
  selector: 'mpn-profile-landing',
  templateUrl: './profile-landing.component.html',
  styleUrls: ['./profile-landing.component.css']
})

export class ProfileLandingComponent {

  constructor(private breakpointObserver: BreakpointObserver) {
    this.dataSource.data = PROFILE_DATA;
  }


  private transformer = (node: ProfileList, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      url: node.url
    };
  }

  treeControl = new FlatTreeControl<TreeFlatNode>(
    node => node.level, node => node.expandable);

  treeFlattener = new MatTreeFlattener(
    this.transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  hasChild = (_: number, node: TreeFlatNode) => node.expandable;
}

Collectives™ on Stack Overflow

Adding routing for page navigation in angular tree

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related