A day with .Net

My day to day experince in .net

Posts Tagged ‘Angular2 routing’

Angular 2 Routing And Passing Parameters

Posted by vivekcek on October 30, 2016

When we plan to develop an Angaular2 application, the first thing need to be in place is a good routing module.
So the intention of this post is to help developers to design a routing mechanism for their Angular2 App.

Hope the reader have some good understanding of Angular2 basics like Module, Component, Routing etc.

We are going to develop an app that have 2 pages ‘Home’ and ‘Products’.
The Home page contain a textbox and a button. Once we enter some value in the textbox and click the button,
products page will be displayed with the value we entered in the home page.

So this post also demonstrate, how you can pass value from one component to another via routing.

Let us have a look at the UI.

Home Page
1

Products Page

2

We have 3 components in our app.

1. AppComponent (Which is our root component).
2. HomeComponent
3. ProductListComponent

Now follow these steps:

1. First let us create our Routing Module.

import { NgModule } from '@angular/core'
import { RouterModule, Routes} from '@angular/router'

import { HomeComponent } from './home.component'
import {ProductListComponent} from './product-list.component'

const routes:Routes=[
    { path:'', redirectTo:'/home', pathMatch:'full' },
    { path:'home', component:HomeComponent },
    {path:'products/:value', component:ProductListComponent}

];

@NgModule({
    imports:[RouterModule.forRoot(routes)],
    exports:[RouterModule]
})

export class AppRoutingModule{}

2. Integrate our routing module to main AppModule.

import {NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
import{AppRoutingModule} from './app-routing.module'

import {AppComponent} from './app.component'
import {HomeComponent} from './home.component'
import {ProductListComponent} from './product-list.component'

@NgModule({
    imports:[BrowserModule,FormsModule,AppRoutingModule],
    declarations:[AppComponent,HomeComponent,ProductListComponent],
    providers:[],
    bootstrap:[AppComponent]
})

export class AppModule{}

3. Add as the first child of head.

4

4. Define route links and outlet in our root component (AppComponent)

import { Component} from '@angular/core'

@Component({
    moduleId:module.id,
    selector:'my-app',
    template:`
    <h1>{{Title}}</h1>
    <nav>
    <a routerLink='/home'>Home</a>
    <a [routerLink]="['/products','test']">Products</a>
    </nav>
    <router-outlet></router-outlet>
    `
})

export class AppComponent{
    Title:string='Routing Demo';
}

5. Here is th code for HomeComponent

import {Component} from '@angular/core'
import {Router} from '@angular/router'
@Component({
    moduleId:module.id,
    selector:'my-home',
    templateUrl:'home.html'
})

export class HomeComponent{
    Title:string='Home';
    
    constructor(private router:Router){

    }

    Go(value:string):void{
        let link=['/products',value];
        this.router.navigate(link);
    }
  
}

6. Here is the code for home.html

<h2>{{Title}}</h2>
<input #input/>
<button (click)="Go(input.value)">Next Page</button>

7. Here is the code for ProductListComponent

import {Component,OnInit} from '@angular/core'
import{ActivatedRoute,Params} from '@angular/router'
import{Location} from '@angular/common'
@Component({
    moduleId:module.id,
    selector:'product-list',
    templateUrl:'products.html'
})

export class ProductListComponent implements OnInit{
    Title:string='Product List';
    Input:string;
    constructor(private router:ActivatedRoute,
    private location:Location){}

    ngOnInit():void{
        this.router.params.forEach((params:Params)=>{
            
            this.Input=params['value'];
          
        })
    }

    goBack():void{
        this.location.back();
    }
}

8. Here is the code for products.html

<h2>{{Title}}</h2>
<label>Passed Value is {{Input}}</label>

So you are done.

Download code from https://github.com/vivekcek/AngularCRUD

Advertisements

Posted in Angular2 | Tagged: , , | Leave a Comment »