Angular 2 Defining Child Routes


Angular 2 Defining Child Routes

We can route one router inside another router this approach is called nested routing  Angular 2. We have to use childrenas an array element in routing to define child routing.

Our Routes with children would look like:

export const routes: Routes = [{
path:'parent', component:ParentComponent,
children: [
  { path: 'child-one', component: ChildOneComponent },
  { path: 'child-two', component: ChildTwoComponent }
]}
];

Example

Here i am taking parent component as main routing and Child One and Child Two as child routing.

  1. child-routing.module.ts
  2. parent.component.ts
  3. child-one.component.ts
  4. child-two.component.ts
  5. app.module.ts

child-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChildOneComponent } from './child-one-component';
import { ChildTwoComponent } from './child-two-component';
import { ParentComponent } from './parent.component'

export const routes: Routes = [
{
path:'parent', component:ParentComponent,
children: [
  { path: 'child-one', component: ChildOneComponent },
  { path: 'child-two', component: ChildTwoComponent }
]}
];

@NgModule({
declarations: [ChildOneComponent,
   ChildTwoComponent,
   ParentComponent],
imports: [ RouterModule.forRoot(routes)],

})
export class ChildRoutingModule {
}

parent.component.ts

import { Component } from '@angular/core';

@Component({
  selector:'parent',
  templateUrl:'./parent.html'
})

export class ParentComponent {
  constructor() { }
}

parent.html

<ul>
<li><arouterLink="/parent/child-one">Child One</a></li>
<li><arouterLink="/parent/child-two">Child Two</a></li>
</ul>
<router-outlet></router-outlet>

child-one.component.ts

import { Component, ViewChild } from '@angular/core';

@Component({
  selector:'child-one',
  template:'<h1>Child One Component</h1>'
})
export class ChildOneComponent {
  constructor() {}
}

child-two.component.ts

import { Component} from '@angular/core';

@Component({
  selector:'child-two',
  template:'<h1>Child Two Component</h1>'
})
export class ChildTwoComponent{
  constructor() { }
}

app.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import {routes, ChildRoutingModule} from '././student/child-routing.module'
import {ParentComponent} from './student/parent.component'

@NgModule({
declarations: [
  AppComponent
],

imports: [
  BrowserModule,
  RouterModule,
  ChildRoutingModule
],

providers: [RouterModule],

bootstrap: [ParentComponent]

})

export class AppModule { }

URL to navigate

  1.  For child one component –  http://localhost:4200/parent/child-one
  2.  For child two component –  http://localhost:4200/parent/child-two
  3.  For parent component –  http://localhost:4200/parent

 






Full-stack web and mobile app development company Contact Us : Skype: indore.webcoder Email: info@w3sparks.com Sales: +91 8085506229