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 sequentiall
y, 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
Go To Component Two with query param #btn
Execute the program to get the output
Awaiting for Administrator approval