CODEWITHSUNDEEP
angular
Ram_T
Ram_T

Reputation: 8484

Can we have multiple <router-outlet> angular2+?

If it is possible to have multiple router outlets, I don't have any working code but assume I have login page in parent <router-outlet> in AppComponent. Once logged in I have to show MyHomeComponent in the parent <router-outlet>. Now, assume that, in MyHomeComponent I want a child <router-outlet> in which I want to show inbox messages, outbox messages, starred messages as user clicks on Inbox, Outbox and Starred links. Please help me to find an answer to this question

AppComponent <router-outlet></router-outlet>,

HomeComponent 

<a routerLink="/xyz">Inbox</a>
<a routerLink="/abc">Outbox</a>
<router-outlet name='outlet1'></router-outlet>

My routes paths

{ path: 'login', component: LoginComponent},
 { path: '', component: LoginComponent },
 { path: 'user', children:[ 
         { path: ':name',children:[ 
               {path:'abc', component: InboxComponent, outlet: 'outlet1' },                                      
               {path:'xyz', component: OutboxComponent, outlet:'outlet1' } 
    ] }]}, 
    { path: '**', component: PageNotFoundComponent }

Upvotes: 7

Views: 11772

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657108

You can have one primary <router-outlet> for every route and additional named <router-outlet name="abc">s. The routes addressing these named outlets are called auxiliary routes. These routes are reflected in the URL within () like /crisis-center(aux:chat;open=true)"

See also

Upvotes: 7

Related Questions