How do I generate Angular route configurations dynamically/pragmatically?
<p>Hi I am trying to define the Angular 2 route paths pragmatically. </p>

<p>I have a service that returns the paths, <strong>all the paths use a common component for routing</strong></p>

<p>the service is shown below, (all paths are generated dynamically)</p>

<pre><code>export class PagesService{
    getPages() :string[] {
        return  [{"slug": 'john',"name": 'John'},{"slug": 'martin',"name": 'Martin'},{"slug": 'alex',"name": 'Alex'},{"slug": 'susan',"name": 'Susan'}]
    }
}
</code></pre>

<p>The routing component,</p>

<pre><code>@Component({
    selector : 'app',
    template :  `
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: '/', name: 'Home', component: HomeComponent}
])
export class RouteComponent{
    constructor(private _pageService: PagesService){
        this.pages = this._pageService.getPages()
    }
}
</code></pre>

<p>Is there any method like <code>*ngFor</code> that can be used to loop through <code>pages</code>  inside the <code>RouteConfig</code> decorator?</p>

<p>I want to get the route configurations as,</p>

<p>something like,</p>

<pre><code>{path: '/{{page.slug}}', name: '{{page.name}}', component: PersonComponent}
</code></pre>

<p>thanks</p>