Sub-routing in angular 5 (Part 8)


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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: