CODEWITHSUNDEEP
javascriptangulartypescript
user11952136
user11952136

Reputation:

how to use router-outlet in a proper way

Hi I have following code: app.routing.module

 const routes: Routes = [   
 {path: '', redirectTo:'/head', pathMatch:'full'},
 {path:'head',component: HeadComponent},
 {path:'main',component: MainComponent},
 ];

and in head I have:

<router-outlet></router-outlet>

which should navigate to main automically but it doesn't. I need to do empty head which is root of the all components.regards

Upvotes: 2

Views: 225

Answers (1)

Adrian Brand
Adrian Brand

Reputation: 21638

A router outlet in head is only going to render children of head, which you have none of.

Your routes are set up to automatically render head in a router outlet of the app component. Head has no children so it will not render main. You need to add main in the children of head.

const routes: Routes = [   
  {path: '', redirectTo:'/head', pathMatch:'full'},
  {
    path:'head',
    component: HeadComponent,
    children: [
      {path:'',component: MainComponent}
    ]
  }
];

Upvotes: 5

Related Questions