How to create routing inside a modal window [ ANGULAR 5 ]?

Question

I have a requirement where i need to switch between 2 different views back and forth based on certain condition inside a modal window's body.

Those 2 views are :

1. List items (Initial view)
2. Add new items

After adding new items i need to switch to the List items view.

NOTE: All these views should be displayed inside a modal windows body.

So using ANGULAR 5 routing how can i create new routes / sub routes inside this modal component ?

Mnemonics

add <router-outlet> tag in your model and all the contents will be load there – Overslaugh

you could pass it as a param to the modal, and figure out which UI to load inside of it. – Gamesmanship

Answer 1

Create another router-outlet with a name like this

<router-outlet name="modal"></router-outlet> 

To navigate to it in your ts, use

this.router.navigate([{ outlets: { modal: 'route' }}])

while in your html, use

<button md-button  [routerLink]="[{outlets: {'modal': ['route']}}]">Speakers</button>

you can also specify it in your routes like

{ path: ':id', component: YourComponent, outlet: 'modal' }

Cienfuegos

Thanks Ekene. Where exactly do you put the named route? <router-outlet name="modal"></router-outlet> – Norvin

In the modal itself. i.e where you want the content to be rendered – Cienfuegos