Multiple components per route in angular

Question

What I want to do is, I want to load the home component and sidebar component at the same time.

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [{
      path: 'sidebar', component: SidebarComponent, children: [
        { path: 'about', component: AboutComponent },
        { path: 'clients', component: ClientsComponent },
        { path: 'services', component: ServicesComponent },
        { path: 'contact', component: ContactComponent },
        { path: 'datatable', component: DataComponent }
      ]
    }]
  }

Formalism

Answer 1

You can use named outlets:

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [

        { path: 'about', component: AboutComponent },
        { path: 'clients', component: ClientsComponent },
        { path: 'services', component: ServicesComponent },
        { path: 'contact', component: ContactComponent },
        { path: 'datatable', component: DataComponent }
      ]
  },
  { path: '', component: SidebarComponent, outlet:'secondary' }
]

HTML:

<router-outlet></router-outlet> //primary outlet
<router-outlet name="secondary"></router-outlet>  //secondary outlet

Michaels

great didnt know about this. hope this will solve the problem – Formalism

Answer 2

Why not just have the HomeComponent be the parent component and SideBarComponent live inside HomeComponent's template?

Emilia

home component is where all the other components code come together. like header footer etc. and then home component would need an outlet to load. so thats why – Formalism

have a component with a empty html and just add router-outlet to it that solves it – Jugulate

i did that. problem is that homecomponent loads but to load the sidebar component i have to type the url in the adress bar. i want the sidebar component and home component to load simultaneously – Formalism

@Formalism remove sidebar from the routes and make it a child component of home component. – Emilia

remove it from your angular router and you are all set. – Emilia

Answer 3

I agree with Mike answer. If you want the sidebar component to show all the time, your home component should be the parent of sidebar. Your routing can be greatly simplify to this:

const routes: Routes = [{
  path: 'about',
  component: AboutComponent
}, {
  path: 'client',
  component: ClientComponent
}, {
  path: '**',
  redirectTo: 'about'
}]

with your app html look somewhat like this:

<div class="app">
    <header></header>
    <div class="content">
        <sidebar></sidebar>
        <router-outlet>
        </router-outlet>
    </div>
    <footer></footer>
</div>

demo:

https://stackblitz.com/edit/angular-tde6as?file=app%2Fclient%2Fclient.component.css

Wertz

but what if i want my home page to show a preselcted option from sidebar menu. How would i do that. like i want when someone lands on the home page, he should be shown home>about>mark's page – Formalism

or just sidebar>about page. then he could select other options if he wants to. How something like that could be acomplished – Formalism

Per your first comment, routerLinkActive will add an active class to your html. So it will show the route option you are on as active. See my updated demo. – Wertz