angular2 how to hide parent router links

Question

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 { }

firesnap firesnap · Accepted Answer · 2016-09-27T20:43:35

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

angular2 how to hide parent router links

1 Answers