how to hide browser url parameter angular2 routing

Question

how to hide browser url parameter angular2 routing? I have the following problem:

I need to hide the parameter in the URL and get:

The route is defined by the following code:

app.routing.ts:

 export const AppRoutes: any = [
 .....
 { path: "product-detail/:id", component: ProductDetailComponent }
 .....
 ];

ProductDetail.ts

  this.route.params.subscribe(params => {
    this.id = params['id'];
  })

Using a route configuration like this you won't be able to. Ploppy has given the right solution, global service and BehaviorSubject is probably what you'll want to use. — Z. Bagley
– Z. Bagley, Commented Jun 30, 2017 at 14:27

Zach Newburgh · Accepted Answer · 2017-06-30 16:23:31Z

2

When navigating to the desired route, you could use skipLocationChange:

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

answered Jun 30, 2017 at 16:23

Zach Newburgh

5643 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

This doesn't hide parameter values

Works perfect for Angular 8 , Thank You