Can not retrieve route params from a component inside mat-sidenav in Angular

Question

when I put my component inside a mat-sidenav I can't get the route parameters

 this.route.paramMap.pipe(
    tap(params => console.log(params)),  
    switchMap((params: Params) => {
        ...
      })
    ).subscribe(
      ...
    );

Answer 1

To get the route from outside the router outlet you can do the following:

    getActivatedRoute(): ActivatedRoute {
        let route = this.router.routerState.root;
        while (route.firstChild) {
            route = route.firstChild;
        }
        return route;
    }

    this.getActivatedRoute().paramMap.pipe(
        tap(params => console.log(params)),  
        switchMap((params: Params) => {
            ...
        })
      ).subscribe(
       ...
    );

Answer 2

Trying to write a service to my header (and any other component) can know the current route and params. Would be nice to know the currently loaded component as well but that’s less important.Hope this works.

   import {Injectable}                              from '@angular/core';
    import {ActivatedRoute, NavigationEnd, Router}   from "@angular/router";
    import {Observable}                              from "rxjs";
    import {first, filter, map, switchMap}           from "rxjs/operators";
    
    @Injectable({providedIn: 'root'})
    export class RouteService {
      constructor(
        private route: ActivatedRoute, 
        private router: Router
      ){}
      public getActivatedRouteParameter(): Observable<any>
      {
        let params
        params = this.router.events.pipe(
          filter(e => e instanceof NavigationEnd),
            map((): ActivatedRoute => {
              let route = this.route;
              while (route.firstChild)
                  {
                      route = route.firstChild;
                  }
              return route;
            }),
            filter((route: ActivatedRoute) => route.outlet === 'primary'),
            switchMap((route: ActivatedRoute) => route.paramMap) , first()
        );
        return params;
      }
    }