I have a route defined like this:
My app.component.html has 2 outlets:
<router-outlet></router-outlet>
<router-outlet name="modal"></router-outlet>
My route:
const routes: Routes = [
{ path: 'contents/:id', component: ContentComponent, children: [
{ path: 'edit', component: ContentFormComponent, outlet: 'modal' }
]},
];
The route (example) /contents/324231 loads fine with the ContentComponent. What I need to do is that the route /contents/324231/edit loads the ContentFormComponent inside the 'modal' outlet.
I tried to follow the examples, building a link:
<a [routerLink]="[ {outlets: { modal: 'edit' } } ]" >edit</a>
It gives the href: /contents/1/(modal:edit)
When I click in the link, the url changes to this but the component is not loaded (neither the constructor or ngOnInit method are called).
Any thoughts?