CODEWITHSUNDEEP
angularangular-router
Bmaed Riasbet
Bmaed Riasbet

Reputation: 15048

Angular 2+: How to access active route outside router-outlet

I have an Angular 5 application.

I have the following code in my app component.

I want to hide navbar and topbar for particular routes.

Is it possible to get currently activated route in app.component.ts ? if so, How ?

If not possible, is there any solution to resolve this ( using guards or whatever else ... )?

enter image description here

Also keep in mind that it should be reactive. when i switch to another route sidebar and navbar should show again.

Upvotes: 24

Views: 13306

Answers (4)

asdf
asdf

Reputation: 1032

To get the active route without subscribing to router events, you can simply use a while loop recursively to find the lowest child.

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

Upvotes: 4

Tomasz Kula
Tomasz Kula

Reputation: 16847

Try this:

in app.component.ts 

import { Component } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter, map, mergeMap } from 'rxjs/operators';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  showSidebar$: Observable<boolean>;
  private defaultShowSidebar = true;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {
    this.showSidebar$ = this.router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      map(() => activatedRoute),
      map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      }),
      mergeMap(route => route.data),
      map(data => data.hasOwnProperty('showSidebar') ? data.showSidebar : this.defaultShowSidebar),
    )
  }

app.component.html

<aside *ngIf="showSidebar$ | async">Sidebar here</aside>

<router-outlet></router-outlet>

<a routerLink="/without-sidebar">Without sidebar</a>
<a routerLink="/with-sidebar">With sidebar</a>
<a routerLink="/without-data">Without data.showSidebar</a>

app routes

RouterModule.forRoot([
  { path: 'with-sidebar', component: WithSidebarComponent, data: { showSidebar: true } },
  { path: 'without-sidebar', component: WithoutSidebarComponent, data: { showSidebar: false } },
  { path: 'without-data', component: WithoutDataComponent },
])

You can modify it as you please.

Live demo

Upvotes: 17

Manzur Khan
Manzur Khan

Reputation: 2486

You can simply do it with an ngIf

In your component ts file

import { Router } from '@angular/router'

constructor(private router: Router)

In your html

<app-navbar *ngIf="!(router.url === '/example')">
</app-navbar>

Upvotes: -1

P.S.
P.S.

Reputation: 16394

Sure. you can filter router events and get only activated routes, and then, you can find some info about each route inside (sorry, can't really say right now, but as I remember, you should get only "activated right now" routes, which looks like what you're searching for):

constructor(private _router: Router) {
  _router.events
    .filter(event => event instanceof NavigationEnd) 
    .forEach(item => {
      console.log(item);
      console.log(_router.routerState.root);
      console.log(_router.routerState.root.firstChild);
    });
}

Upvotes: 3

Related Questions