How to route to the child components in Angular2?

Question

I am trying to do the base setup for a project. Below are the files I created:

app.component.html

<div class="jumbotron">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Below is my routes in app.routes.ts file

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
      path: 'main',
      component: MainComponent,
      children: [
        {
            path: 'main/dashboard',component: DashboardComponent
        },
        {
            path: 'main/user',component: UserComponent
        },
        {
            path: 'main/reports',component: ReportsComponent
        }
      ]
    },

    { path: '**', redirectTo: 'main' }
];

main.component.html

<div id="wrapper">
  <app-top-bar></app-top-bar>
  <router-outlet></router-outlet>
</div>

topbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand">My Admin</a>
    </div>
    <ul class="nav navbar-right top-nav">
        <li>
            <a [routerLink]="['/login']"><i class="fa fa-fw fa-user"></i> Logout</a>
        </li>
    </ul>
  <app-side-bar></app-side-bar>
</nav>

sidebar.component.html

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li [routerLink]="['main/dashboard']" routerLinkActive="active">
        <a><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
    </li>
    <li [routerLink]="['main/user']" routerLinkActive="active">
        <a ><i class="fa fa-fw fa-bar-chart-o"></i> Users</a>
    </li>
    <li [routerLink]="['main/reports']" routerLinkActive="active">
        <a><i class="fa fa-fw fa-table"></i> Reports</a>
    </li>
  </ul>
</div>

I am able to login and navigate to the main component page, which contains a topbar, a sidebar and a content section wherein it will display the content of the sidebar components, like dashboard, users, or reports.

But, when I try to click the sidebar components (dashboard, users, or reports), the components are not displaying in right part of the screen. Can I get any help?

you have not included <router-outlet></router-outlet> in sidebar component — user1608841
– user1608841, Commented Aug 22, 2017 at 7:33
@Rahul i have included in main.component which contains topbar, sidebar and <router-outlet></router-outlet> to display the sidebar contents. — Raghav
– Raghav, Commented Aug 22, 2017 at 7:39
you have configured nested children routes inside main route. So to work with child routes you need to add <router-outlet></router-outlet> in sidebar component — user1608841
– user1608841, Commented Aug 22, 2017 at 7:40
remove main/ from your routing configuration from child routing and sidebar component is fine i guess. — user1608841
– user1608841, Commented Aug 22, 2017 at 7:55

user1608841 · Accepted Answer · 2017-08-22 08:04:53Z

4

Hi Please remove main/ from your child route configuration:

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
      path: 'main',
      component: MainComponent,
      children: [
        {
            path: 'dashboard',component: DashboardComponent
        },
        {
            path: 'user',component: UserComponent
        },
        {
            path: 'reports',component: ReportsComponent
        }
      ]
    },

    { path: '**', redirectTo: 'main' }
];

and rest of your code is fine.

answered Aug 22, 2017 at 8:04

user1608841

2,4751 gold badge29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fredrik Lundin Grande · Accepted Answer · 2017-08-22 07:43:37Z

Change:

children: [
        {
            path: 'main/dashboard', component: DashboardComponent
        },
        {
            path: 'main/user', component: UserComponent
        },
        {
            path: 'main/reports', component: ReportsComponent
        }
      ]

To:

children: [
        {
            path: 'dashboard', component: DashboardComponent
        },
        {
            path: 'user', component: UserComponent
        },
        {
            path: 'reports', component: ReportsComponent
        }
      ]

Otherwise your routes will need look like /main/main/dashboard etc to hit.

Collectives™ on Stack Overflow

How to route to the child components in Angular2?

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related