Investigate/implement automatic route tree

[Wolfr]

Investigate the possibility of an automatic route tree.

Currently, we have a template that looks like this prototype-wrapper.component.html:

        <li>
          <h4 class="br-styleguide-bordered-list-header">Documentation</h4>
          <ul class="br-styleguide-bordered-list">
            <li>
              <a routerLink="/sign-in">Sign in</a>
            </li>
            <li>
              <a routerLink="/dashboard">Dashboard</a>
            </li>
          </ul>
        </li>
...(code abbreviated)

There is also routing data in app-routing.module.ts:

const routes: Routes = [
  { path: 'sign-in', component: SignInComponent },
  { path: 'styleguide', component: StyleguideComponent },
  { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
  {
    path: 'dashboard', component: DashboardComponent,
    children: [
      { path: 'module-1', component: ModuleOneComponent },
      { path: 'module-2', component: ModuleTwoComponent },
      { path: 'module-3', component: ModuleThreeComponent },
    ]
  },
  {
    path: 'styleguide', component: StyleguideComponent,
    children: [
      { path: 'colors', component: ColorsComponent },
      { path: 'typography', component: TypographyComponent },
      { path: 'icons', component: IconsComponent },
      { path: 'button-skins', component: ButtonSkinsComponent },
    ]
  },
];

Can we somehow use this to create a loop to loop over our tree? I crafted some non-working code as an example:

<li *ngFor="let route of routes"
  [class.selected]="route === activeRoute"
>
<a href="{{route.path}}">
{{route.name}}
</a>
</li>

[Wolfr]

Beetje rond gegoogled, maar niets gedaan met de code, dat laat ik aan @insit .

https://stackoverflow.com/questions/43907340/getting-all-routes-from-current-module-angular-2
https://stackoverflow.com/questions/37569936/how-to-list-output-all-routes-in-routes-in-my-angular2-app/45492930