how to hide browser url parameter angular7 routing

Question

how to hide browser url parameter angular7 routing? I have the following problem: http://localhost:3000/company-detail/40538e32-76e6-40ac-b514-364d839d7619 I need to hide the parameter in the URL and get: http://localhost:3000/company-detail/ The route is defined by the following code: app.routing.ts: export const AppRoutes: any = [ ..... { path: "company-detail/:id", component: CompanyDetailComponent } ..... ];

Siddharth Gajbhiye · Answer

Hello Solution 1 : You can't hide the parameter in the url. But you can use SessionStoreage for alternative. You can create parameter in SessionStorage and can read in every part of your project until when you close the browser or if you kill the parameter value from SessionStorage Solution 2 : When navigating to the desired route, you could use skipLocationChange: this.router.navigate(['/product-detail'], { queryParams: this.id, skipLocationChange: true}); Solution 3 :You can encrypt the url parameter Please refer the below link to encrypt it https://stackoverflow.com/questions/39541185/custom-encoding-for-urls-using-angular-2-router-using-a-sign-in-place-of-a-sp

Haridhass Mani · Answer

hai Siddharth, Solution 2; when I use skipLocationChange:true, id got hidden but problem i faced is https:localhost:3000 (actual URL) but i need https:localhost:3000 /company-detail (expected URL) this is my code company.ts onClickcompanyDetail(id:string):void{ this.router.navigate(['/company-detail',id], {skipLocationChange: true}); } app.routing.ts { path:'company-detail'/:id, component:CompanyDetailComponent } thanks in advance