While developing the large-scale applications,You may often came up with the scenarios where you want to send data through routing parameters. I will discuss all possible ways to do the same.
NAVIGATION AND ROUTE PARAMS
We can send data through navigation, and most often we use this method .
How to use it??
- Step 1: In your routing module, set up your routes with the params you wanna send.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RoleUserMapComponent } from './role-user-map.component';
const routes: Routes = [
{ path: '', component: RoleUserComponent },
{ path: 'add',component:RoleUserAddComponent },
{ path: 'edit/:userId',component:RoleUserEditComponent },
{ path: 'detail/:userId', component:RoleUserDetailComponent
];
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
exports: [RouterModule],
providers: []
})
export class AppRoutingModule { }
Here in my path, i have attached 'userId' as param ,which will subscribe later from detail and edit component
- Step 2:Now you will set the navigation either through navigator method or directly through routerLink
Using routerLink
< a [routerLink]=”['/edit',userId]”>Edit</a>
Using navigator
this.router.navigate(['edit', userId]);
- Step 3:It's time to subscribe the params we have passed inside our edit/details component
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-role-user-map-edit',
templateUrl: './role-user-map-edit.component.html',
styleUrls: ['./role-user-map-edit.component.scss']
})
export class RoleUserMapEditComponent implements OnInit {
private sub: Subscription;
id:string;
constructor(
private route: ActivatedRoute
) { }
ngOnInit(): void {
this.sub = this.route.params.subscribe(params => {
this.id = params['userId'];
});
ngOnDestroy(): void {
this.sub.unsubscribe();
}
First you will get activatedRoute by instantiating service inside constructor.
Next you will create a private subscription,Remember you have to unsubscribe it in ngOnDestroy to avoid memory leakage.
Then you subscribe to your activatedRoute and use it .
Using Query Parameters
Let's say you don't wanna send only userId,You wanna send name and mobileNo as well.While sending multiple parameters you use query parameters.
How to use it
- You can simply pass queryParams like this
Using Navigator
this.router.navigate( ['edit'], { queryParams: { userId: '1101',mobileNo:931065465}});
Using routerLink
< a [routerLink]=”['/edit']” [queryParams]="{userId: '1101',mobileNo:931065465 }" >Edit</a>
Here you will simply send your data through queryParams and it will show like
http://localhost:4200/userId?userId=1101&mobileNo=9310476536
After that you can simply subscribe it like above except the fact you will use queryParams instead of params this time
this.sub = this.route.queryParams.subscribe(params => {
this.id = params['userId'];
this.mobileNo=params['mobileNo'];
});
One thing if you are routing to another element further and you want queryParams to be preserved ,queryParamHandling will be used for this
How to use it
this.router.navigate( ['details'], { queryParamsHandling:'preserve'});
What it will do,let say you need userId in details component, queryParam will be preserved and you can subscribe
http://localhost:4200/details?userId=1101&mobileNO=931065465
Using Fragments
How to use it
- You can simply pass fragments just like queryParams
Using Navigator
this.router.navigate( ['edit'], {fragment: { userId: '1101',mobileNo:931065465}});
Using routerLink
< a [routerLink]=”['/edit']” [fragment]="{userId: '1101',mobileNo:931065465 }" >Edit</a>
Static Data
{ path: 'userId', component: StaticComponent, data :{ userId:'1101', mobileNO:931065465}},
Simply subscribe data in your component just like above
this.route.data.subscribe(data => {
this.userInfo=data;
})
Dynamic Data
Using routerLink
<a [routerLink]="['/edit']" [state]="{ userId:'1101', mobileNO:931065465}">Dynamic Data</a>
Using Navigation
this.router.navigate( ['edit'], {state: { userId: '1101',mobileNo:931065465}});
How to subscribe?
It's little different from rest,here you have to subscribe in constructor only .It won't work elsewhere
constructor(private router: Router, private activatedRoute: ActivatedRoute)
{
console.log(this.router.getCurrentNavigation().extras.state);
}
You can store the state in your local variable and use it anywhere in your program.
I hope it was helpful for you guys .If you liked please share ,like and let me know in comments if any improvement needed. :)
Top comments (1)
Thanks!