Chandradev's Blog

If we have to display page with in other page then we can go for angular sub routing. Before reading this post, please go through this post. This is just extension of previous post

Angular Routing Part 7

Step 1 : For sub routing demo we will create some more component i.e. Users and Userlist
ng g c users
ng g c userList

Step 2: Go to the app.module.ts and add this code for sub route menu

 {path:'user',children:[
  {path:'list',component:UserlistComponent,children:[
  {path:'detail/:name', component:UsersComponent }
  ]

 

Complete code for this file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule,Routes} from '@angular/router'

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { UserlistComponent } from './userlist/userlist.component';
import { UsersComponent } from './users/users.component';

const appRoutes:Routes=[
  {path:'home',component:HomeComponent},
  {path:'about',component:AboutComponent},
  {path:'contact',component:ContactComponent},

  {path:'user',children:[
  {path:'list',component:UserlistComponent,children:[
  {path:'detail/:name', component:UsersComponent }
  ]

  }
  ]},
  {path:'', redirectTo:'/home',pathMatch:'full' },
  
  {path:'**' ,redirectTo:'/home',pathMatch:'full'} 
];


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent,
    ContactComponent,
    UserlistComponent,
    UsersComponent
   
  ],
  imports: [
    BrowserModule,RouterModule.forRoot(appRoutes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3: Go to the app.component.html page and add a menu for user like this

<ul>
  <li>
    <a routerLink="/home">Home</a>
  </li>
   <li>
    <a routerLink="/about">About Us</a>
  </li>
  <li>
    <a routerLink="/contact">Contact Us</a>
  </li>
  <li>
    <a routerLink="/user/list">User</a>
  </li>
</ul>
<router-outlet> </router-outlet> 

Step 4: Go to userlist.component.ts file add an array of user to display like this

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

@Component({
  selector: 'app-userlist',
  templateUrl: './userlist.component.html',
  styleUrls: ['./userlist.component.css']
})
export class UserlistComponent implements OnInit {

users= [
  {name:'Ram'},
   {name:'Mohan'},
    {name:'Hari'},
     {name:'John'}
];

  constructor() { }

  ngOnInit() {
  }

}

Step 5: Go to the userlist.component.html and write the code for linking the user to user page and Keep the place holder for displaying user details like this

<div class="container">
  <h2>User list page</h2>
  <ul class="para">
    <li *ngFor="let user of users" [routerLink]="['detail', user.name]"> {{ user.name }} </li>
  </ul>
  <router-outlet></router-outlet>
</div> 

Step 6: Go to the users.component.ts page write the code to display data on basic of input parameter which is being passed from Userlist page.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
   name:any;
   sub:any;

  constructor(private route:ActivatedRoute) { }

  ngOnInit() {
    this.sub=this.route.params.subscribe(Params=>{
      this.name=Params['name']
    })
  }

}

Step 7: Go to the Userlist.Component.html page and write the code to display the name of user like this

<div class="container">
<h2>User Page</h2>
<p>Name: {{name}}</p>
</div>

Now compile the code, you will see example of sub routing in angular 5.