CODEWITHSUNDEEP
angular
VIK6Galado
VIK6Galado

Reputation: 680

How to navigate to child route in angular4?

I have setup the routing as shown below:

export const Approute: Routes = [
  {
    path: '',
    component: DashboardComponent
  },
  {
    path: 'add-course',
    component: AddCourseComponent
  },
  {
    path: 'builder',
    component: BuilderComponent,
    children: [
      { path: 'add-builder', component: AddBuilderComponent},
      { path: 'list-builder', component: ListBuilderComponent}
    ]
  }
];

And my HTML is as follows

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
      <li class="active">
          <a routerLink="/"><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
      </li>
      <li>
          <a routerLink="add-course"><i class="fa fa-home"></i> Add/view Villa</a>
      </li>
      <li>
          <a (click)="toggleDashboard()" routerLink="builder"><i class="fa fa-fw fa-arrows-v"></i> Builder Management <i class="fa fa-fw fa-caret-down"></i></a>

          <ul id="demo" class="collapse" *ngIf="showDropdown === true" style="display: inline-block;">
              <li>
                  <a routerLink="add-builder">Add Builder</a>
              </li>
              <li>
                  <a routerLink="list-builder">List Builder</a>
              </li>
          </ul>
      </li>
  </ul>
</div>

When i try to navigate to DashboardComponent and AddCourseComponent i am able to do this, but when i hover over the child links of builder is showing http://localhost:4200/add-builder instead it should show and navigate to http://localhost:4200/builder/add-builder.

If i navigate to http://localhost:4200/builder/add-builder manually its working but not from the view.

Where am doing wrong?

Upvotes: 0

Views: 240

Answers (2)

Sudheer KB
Sudheer KB

Reputation: 1606

Change the template as below

<li>
  <a [routerLink]="['/builder/add-builder']">Add Builder</a>
</li>
<li>
  <a [routerLink]="['/builder/list-builder']">List Builder</a>
</li>

For reference visit

Upvotes: 1

user4676340
user4676340

Reputation:

Routing is relative to your current router state.

If you are in your first level of routing, then 

routerLink="add-course" --> domain.com/add-course
routerLink="add-builder" --> domain.com/add-builder

If you want to route directly to the child route, you must use this 

routerLink="builder/add-builder"
[routerLink]="['builder', 'add-builder']"

Upvotes: 1

Related Questions