Possible ways to send data through Routing in angular

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. :)