Angular 2 Routes - is it possible to create dynamic routers from routes using ngFor?

Question

I would like to take all Routes in a specific module with a specific path and use ngFor to scroll through them and create a dynamic list of links in my html component.

ngFor Example (overview.component.html):

<li *ngFor="let item of items; let i = index;">
   <a routerLink="/{route.path}">{route.path}</a>
</li>

Module example

(base.module.ts):

...

const routerConfig = [
  {
    path: '',
    component: BaseComponent,
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: 'group-one',
        component: OverviewComponent
      },
      {
        path: 'group-one/:id',
        component: DetailComponent
      },
      {
        path: 'group-two',
        component: OverviewComponent
      },
      {
        path: 'group-two/:id',
        component: DetailComponent
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routerConfig)
  ]
  ...
})
export class BaseModule { }

After several experiments with ActivatedRoute, Router, etc. I could not find an object in which this information becomes available for use.

Is this currently possible through an Angular 2 router?

How can I solve this problem?

Answer 1

This code

<a routerLink="/{route.path}">

/{route.path}

,

<a [routerLink]="'/' + route.path">

<a routerLink="/{{route.path}}">

Angular [] {{}} ( )

[propName]="..."

propName="{{...}}"

.