Dynamically add route to child components angular 5

Question

I have a routing like follows

const routes: Routes = [
 { path: '', redirectTo: '/homeapp', pathMatch: 'full'},
      { path: 'homeapp', component: BasicComponent,
         children:[{ path: 'textboxsettings', outlet: 'settings', component: DynamictextboxsettingsComponent},
    { path: 'checkboxsettings', outlet: 'settings', component: DynamiccheckboxsettingsComponent},
    { path: 'tabsettings', outlet: 'settings', component: TabsettingsComponent},
      ]},
  { path: 'renderview/:rand', component: RendercomponentComponent},

];

I want to dynamically add route to children of path /homeapp (specified above). I have look into this.router.config.unshift method. How can we use it in adding to a child route. Any help would be appreciable.

Answer 1

This method, may, help you to deal with this problem. Just reset a router configuration by passing a new one.

https://github.com/angular/angular/blob/6.1.8/packages/router/src/router.ts#L378-L400

Answer 2

take a look at this post.

https://blog.mgechev.com/2015/12/30/angular2-router-dynamic-route-config-definition-creation/

also, a better practice I think, would be to use a dynamic url instead of adding actual routes to the stack. It's more performant and easier to manage. You add a variable to the end of the url in your url configuration stack, then you can pass it a variable:

Angular2 - How to use router with dynamic urls