CODEWITHSUNDEEP
angular2-routing
Danny
Danny

Reputation: 78

angular2 how to hide parent router links

In angular2, I need to find a way to hide parent router links. I must show ONLY the lowest-level information - NOT the routing-link tree that brought me to this level.

I'm using Angular 2.0 final. I'm not using angular-cli, and I can't switch to it. All my code is contained in this plunk: http://plnkr.co/edit/EdLY62A8GfVimEn48HaA

After the user clicks on the 'About' routerLink, I must display ONLY "About Contents", and HIDE the 'Home' and 'About" routerLinks.

The same requirement holds for any child routes that may exist for 'About'. At any point in the routing tree, I must show ONLY the choices for that level - all the parent routing links that brought me to this point MUST NOT be shown.

App component:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-app',
  template: `
   <a [routerLink]="['/']">Home</a>
   <a [routerLink]="['/about']">About</a>
   <div class="outer-outlet">
     <router-outlet></router-outlet>
   </div>
  `
})
export class AppComponent { }

Upvotes: 0

Views: 1085

Answers (1)

firesnap
firesnap

Reputation: 26

To hide and show specific links depending on our current route, we need to:

Know our current route

    // Router contains our current path
    import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router';

Listen to route changes, to get the current path and update the links

    constructor(private router: Router) {

      router.events.subscribe((event: NavigationEvent) => {
        if (event instanceof NavigationStart) { 
          let activeRoute: string = event.url;
          // Now that we know the path
          // we can determine which links to hide
        }
      });

    }

More navigation events

Here's a demo

Upvotes: 1

Related Questions