DEV Community

seshubabubatchu
seshubabubatchu

Posted on

2 1

Angular Routing #2

Route Params
Ex:
{ path: 'product/:id/, component: ProductDetailComponent }

<a [routerLink]="['/Product', product.productID]">{{product.name}} </a>
Retriving Params:
ActivatedRoute can be used for this purpose
this.id=this._Activatedroute.snapshot.paramMap.get("id");

this._Activatedroute.paramMap.subscribe(params => {
this.id = params.get('id');
});

We usually retrieve the value of the parameter in the ngOninit life cycle hook, when the component initialised.

When the user navigates to the component again, the Angular does not create the new component but reuses the existing instance. In such circumstances, the ngOnInit method of the component is not called again. Hence you need a way to get the value of the parameter.

By subscribing to the observable paramMap property, you will retrieve the latest value of the parameter and update the component accordingly.
can also get the parent params like

this.sub=this._Activatedroute.parent.params.subscribe(params => {
this.id = params['id'];
let products=this._productService.getProducts();
this.product=products.find(p => p.productID==this.id);
});

Simple code snippet:
Image description

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay