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 }
      ]
    }]
  }

Solution 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

Solution 2

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

Comments

[SONGSTER]

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

[Rahul Singh]

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

[SONGSTER]

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

[Mike Tung]

@SONGSTER remove sidebar from the routes and make it a child component of home component.

[Mike Tung]

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

[SONGSTER]

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

[SONGSTER]

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

[SONGSTER]

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

[Ringo]

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.