Angular 8: pass a data to a router

Question

I have page with a list of products, and I want to pass product id to a product/:id router (I don\'t want to parse it from router url). What options do I have? Can I have so

Answer 1

import { Router } from '@angular/router';

constructor(private router: Router) { }

Use as a path Variable

In app.routes.ts

{ path: 'product/:id' , component: ProductComponent}

How to use in html file

Your link

Here product.id is the value you wants to pass

How to use in in typescript file

this.router.navigate(['/product', this.product.id]);

Here this.product.id is the value you wants to pass

Use as a optional parameter

In app.routes.ts

{ path: 'product' , component: ProductComponent}

How to use in html file

Your link

Here product.id is the value you wants to pass

How to use in in typescript file

this.router.navigate(['/product',{ id : this.product.id} ]);

Here this.product.id is the value you wants to pass

Use as a Query parameter

In app.routes.ts

{ path: 'product' , component: ProductComponent}

How to use in html file

Your link

Here product.id is the value you wants to pass

How to use in in typescript file

this.router.navigate(['/product'], { queryParams: { id : this.product.id}});

Here this.product.id is the value you wants to pass