Angular Js 2 - Routing with Url Param, Query Param and Url redirection

A simple program to show how to route to another component using button and anchor links with url and query param

http://localhost/getEmployee/1      - Here 1 is url param

http://localhost/getEmployee?id=1   - Here id is query parameter


https://plnkr.co/edit/Si7s3owjXwc9Snemgilu?p=preview

Program:

File: app.routing.ts
 

import { RouterModule, Routes } from "@angular/router";


import { AppComponent }  from './app.component';
import { AppOneComponent }  from './one.component';
import { AppTwoComponent }  from './two.component';


const APP_ROUTES: Routes = [
    {path:'', component: AppComponent},
    {path:'component-one',component: AppOneComponent},
    {path: 'component-one/4', redirectTo: '/component-one/6', pathMatch: 'full' },
    {path:'component-one/:id',component: AppOneComponent},
    {path:'component-two',component: AppTwoComponent}
];

export const routing = RouterModule.forRoot(APP_ROUTES);

The path declaration are taken sequentially, if a new path add in the last item, and that matched previously, the newly added path will not execute. Here, path:'component-one/4'  matching with  path:'component/:id' so if the component-one/4 add next to 'component-one/:id, it will not work, the redirection might not happen.


component-one/:id  - here id is the url params, if the url having http://localhost/getEmployee/1 the, id is 1.

redirectTo: - is used to redirect from one path to another path

app/app.component.ts
 

import { Component, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import{ComponentOne} from './one.component';
import{ComponentOne} from './two.component';

import { ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs/Rx";

@Component({
  selector: 'my-app',
  template: `
  <h4>Home Page</h4>
  <ul>
      <li><a [routerLink]="['component-one']" >Load One</a> </li>
      <li><a [routerLink]="['component-one','1']" >Load One with url param</a> </li>
      <li><a [routerLink]="['component-one','4']" >Load One with Redirect from 4 to 6</a> </li>
      <li><a [routerLink]="['component-two']" [queryParams]="{id: 500}" >Load Two with queury param</a>  </li>
  </ul>
      <button (click)="onNavigate()">Go To Component Two with query param</button>
  <br>
  <hr>
  <router-outlet></router-outlet>
  `
})
export class AppComponent  {
 
  constructor(private router: Router) {
  }

  onNavigate() {
    this.router.navigate(['/component-two'], {queryParams: {'id': 100}});
  }
}

[routerLink]="['component-one','1']"  - here '1' is the url param


onbutton click, we need to pass queryParams using queryParams attribute

File: app/one.component.ts
 

import { Component, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs/Rx";

@Component({
  selector: 'one',
  template: `<h3>Component One</h3>
  
   
   {{id}}
  `
})
export class AppOneComponent implements OnDestroy {
  private subscription: Subscription;

  id: string;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {
    this.subscription = activatedRoute.params.subscribe(
        (param: any) => this.id = param['id']
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

activatedRoute - is used to detect the activatedRouter and from that we can take the parameter.


File: app/two.component.ts
 

import { Component, OnDestroy } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
import { Subscription } from "rxjs/Rx";

@Component({
  selector: 'two',
  template: `<h1>Component Two</h1>
  
    {{param}}
    `
})
export class AppTwoComponent implements OnDestroy {
  private subscription: Subscription;

  param: string;

  constructor(private route: ActivatedRoute) {
    this.subscription = route.queryParams.subscribe(
        (queryParam: any) => this.param = queryParam['id']
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

 

Program Execuiton

Live Program is available here

https://plnkr.co/edit/Si7s3owjXwc9Snemgilu?p=preview
 

Program Output

 

Home Page

• Load One
• Load One with url param
• Load One with Redirect from 4 to 6
• Load Two with queury param

Go To Component Two with query param #btn


Execute the program to get the output
 

---