DEV Community

Cover image for Possible ways to send data through Routing in angular
Deepa Chaurasia
Deepa Chaurasia

Posted on

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 { }


Enter fullscreen mode Exit fullscreen mode

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();
  }


Enter fullscreen mode Exit fullscreen mode
  • 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;
      })
Enter fullscreen mode Exit fullscreen mode

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);
  }
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
emreaka profile image
Emre AKA

Thanks!