This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Deepa Chaurasia
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??
- First step: 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
- Second step: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]);
- Third Step: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-detail',
templateUrl: './role-user-map-detail.component.html',
styleUrls: ['./role-user-map-detail.component.scss']
})
export class RoleUserMapDetailComponent 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 .
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Deepa Chaurasia
Deepa Chaurasia | Sciencx (2022-11-18T18:55:01+00:00) Possible ways to send data through Routing in angular. Retrieved from https://www.scien.cx/2022/11/18/possible-ways-to-send-data-through-routing-in-angular/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.