Pass invisible or hidden parameters using routerLink Angular

angular router routeparams
Sai picture Sai · Oct 24, 2017 · Viewed 38.5k times · Source

I have router link like below:

<button class="take-a-tour-btn" [routerLink]="['/dashboard', {'showTour':'show'}]">

I want to pass parameter showTour. But, when I do this, the parameter is visible in url and I would like to hide it. I have gone through so many references(which says about optional parameters) ,but with no success in my case. How could I solve this?

Answer

Fateh Mohamed picture Fateh Mohamed · Jan 29, 2019

in Angular 7 you can use History state to pass dynamic data to the component you want to navigate to, without adding them into the URL, like so :

this.router.navigateByUrl('/user', { state: { orderId: 1234 } });

or

<a [routerLink]="/user" [state]="{ orderId: 1234 }">Go to user's detail</a>

and you can get it this way

constructor() {
  this.router.events
   .pipe(filter(e => e instanceof NavigationStart))
   .subscribe((e: NavigationStart) => {
    const navigation  = this.router.getCurrentNavigation();
    this.orderId = navigation.extras.state ? navigation.extras.state.orderId : 0;
   });

 }

Related questions

RouterModule.forRoot(ROUTES) vs RouterModule.forChild(ROUTES)

What is the differences between these two and what are the use cases for each? The docs aren't exactly helpful: forRoot creates a module that contains all the directives, the given routes, and the router service itself. forChild creates a …

Read More
Angular2 Router error: cannot find primary outlet to load 'HomePage'

I just started using the new routing library (@angular/router v3.0.0-alpha.7) but following the official docs leads to error below: browser_adapter.ts:74: EXCEPTION: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomePage' Question is - …

Read More
Redirect user with router depending on logged in status

I would like to automatically route to a login page if the user is not logged in. app.module.ts import { RouterModule, Routes } from '@angular/router'; import { AppComponent } from './app.component'; import { LoginComponent } from './login/login.component'; …

Read More