Possible ways to send data through Routing in angular
Tags: webdev, javascript, programming, angular
Published: 2022-11-18 18:55:01

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