Nested dynamic routes for tree structure

Question

I am creating an application in angular 7 in which I have a tree in side navigation menu. Example tree is like below:

What I want to achieve is

1. If I click Purple, my URL should be formed with complete hierarchy -

/vegetables/onion/purple

2. Application should open page if I enter the below URL

localhost:4000//vegetables/onion/purple

my code is as below sidenav.component.ts

import {Component, OnInit} from '@angular/core';
import {BlogService} from '../../../services/blog.service';


export interface Files {
  name: string;
  reference: string;
  isExpanded: boolean;
  children: Files[];

}

@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.css'],
})
export class SidenavComponent implements OnInit {
  files: Files[];
  selectedPath: string;


  constructor(private blogService: BlogService) {
  }

  ngOnInit() {
    this.blogService
      .getTreeNodes()
      .subscribe((files: []) => {
        this.files = files;
      });
  }

  toggleState(item: Files) {
    item.isExpanded = !item.isExpanded;
  }

  nodeSelectEvent(reference: string, event: any) {
    this.selectedPath = '';
    this.blogService.selectedNode.next(reference);
    this.selectedPath = reference + '/' + this.selectedPath;
    this.getHierarchicalPath(event.target.parentElement.parentElement.parentElement);
    this.blogService.selectedNode.next(this.selectedPath);
  }

  getHierarchicalPath(element: Element) {

    const parentReference = element.getAttribute('id');
    if (parentReference) {
      this.selectedPath = parentReference + '/' + this.selectedPath;
      this.getHierarchicalPath(element.parentElement.parentElement);
    }
  }
}

sidenav.component.html

<div class="row">
  <div class="col-md-12">
    <div id="google_translate_element"></div>
  </div>
</div>
<div class="container sidenav-tree">
  <ng-template #recursiveList let-files>
    <div *ngFor="let item of files">
      <div class="row node-item {{item.reference}}">
        <div class="col-xs-1">
          <i
            data-toggle="collapse"
            attr.data-target="#{{item.reference}}"
            class="fa"
            [ngClass]="{'fa-chevron-down': item.isExpanded, 'fa-chevron-right': !item.isExpanded}"
            *ngIf="!(item.children.length===0)"
            (click)="toggleState(item)"></i>
        </div>
        <div class="col-xs-11 node-text" (click)="nodeSelectEvent(item.reference, $event)">
          {{item.name}}
        </div>
      </div>
      <div
        id="{{item.reference}}"
        class="container collapse"
        *ngIf="!(item.children.length===0)">
        <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: item.children }"></ng-container>
      </div>
    </div>
  </ng-template>
  <ng-container *ngTemplateOutlet="recursiveList; context:{ $implicit: files }"></ng-container>
</div>

and blog.service.ts

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class BlogService {

  public selectedNode: Subject<string> = new Subject<string>();
  public sideNavDisabled: Subject<boolean> = new Subject<boolean>();

  constructor(private http: HttpClient) {
  }

  public getTreeNodes() {
    return this.http.get('/assets/tree.json');
  }
}

The problem is that it can be any level of hierarchy and hierarchy is also completely dynamic. For now I just want to get the hierarchy when url is entered and print it on console. Though I will be using dynamic-html to load data from the hierarchy which will be loaded into the content component. So, I have only one component in which I will be loading static html files

Please suggest me methods to make this work.

My code can be found here - https://stackblitz.com/github/vibhorgoyal18/atest-blog

Answer 1

Did you try wildcard route? Instead of declaring a specific route, you can use a wildcard:

{
  path: '**',
  component: TreeItemExampleComponent
}

And parse your URL inside a component.