Angular 5 global query parameter

Question

I would like to add a global query parameter to each path of the application (something like /my/path?config=foo). I don't wanna use the perserve query params option as it preserves all query params and I only want to preserve this specific one.

My application does run with different configurations that can be chosen by the user who runs it. This choice is currently saved in the configuration service and is gone when closing or reloading the tab/window. I can't save the choice in the local storage or session as it is possible to have different configurations open in multiple tabs of the same browser (and as far as I know the local storage is global through all tabs of a browser - if it's not in incognito mode or similar).

But I want my users to have the option to copy the current url and send it to somebody else who get's the exact same data and configuration as the user who sent the link.

Therefore I would like to automatically attach a "config" query parameter to each url of the application as soon as the user chose a configuration setting.

Answer 1

My suggestion is to redefine your routing strategy, and has the same routing parameter for every Component you want to use the configuration.

Define your routing in a way that it has a special parameter:

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'example-path,
    canActivate: [AuthGuard],
    children: [
      {
        path: ':example-parameter-path',
        canActivate: [AuthGuard],
        children: [
          {
            path: ':configuration',
            component: YourComponent
          },
      {
        path: '',
        component: YourComponent,
        pathMatch: 'full'
      },
    ]
  },
...
];

Then, in the components you want to access that configuration, you can get it from the Activated route:

 private subscribeToUrlChange() {
    this.activatedRoute
      .params
      .subscribe(
        params => {
          console.log([params['configuration'])
        }
      );
  }

Answer 2

I think I'm a little late for the bounty but here the implementation. In your app.component.ts

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

  constructor(private route: Router) {
    let flag = 0;
    this.route.events.subscribe((event) => {
      if(event instanceof NavigationEnd) {
        console.log(event);

        if(event.url.indexOf('?') === -1)  {
          this.route.navigate([event.url], { queryParams: { config: 'popular' } });
        }   
      }      
    })
  }
}

The stackblitz demo here: https://stackblitz.com/edit/angular-router-basic-example-t5w3gz

We can modify if needed to work in accordance to the activated route So instead of using simple indexOf you can check if the specified query param is present.