disable/hide directive based on route Angular2

Question

I have routes defined in my app.component.ts file as follows

@View({
    templateUrl: 'assets/home.html',
    directives: [AccountManagerComponent, HeaderComponent, ROUTER_DIRECTIVES],

})
@RouteConfig([
    { path: '/home', name: 'Home', component: HomeComponent },
    { path: '/about', name: 'About', component: AboutComponent },    
    { path: '/', name: 'IdentityManager', component: IdentityManagerComponent, useAsDefault: true}    
])

template in home.html is as follow.

<header id="ag-header" class="app-header" role="banner"></header>
<section id="ag-content" class="page-login">
  <router-outlet></router-outlet>
</section>

now i want to disable/hide 'header' element if i am at identitycomponent.

So can i view/hide directives in template based on the route?

score 0 · Answer 1 · edited May 23 '17 at 10:30

0

<header *ngIf="isIdentityManager" id="ag-header" class="app-header" role="banner"></header>
<section id="ag-content" class="page-login">
  <router-outlet></router-outlet>
</section>

constructor( router: Router) {
  router.subscribe(value => {
    this.isIdentityManager = router.currentInstruction.component.routeName == 'IdentityManager';
  });
}

See also In Angular 2 how do you determine the active route?

edited May 23 '17 at 10:30

Community

1
1

answered May 03 '16 at 17:05

Günter Zöchbauer

623,577
216
2,003
1,567

i have added import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, Router} from 'angular2/router'; But got error that router.currentInstruction is not a function – sachin kulkarni May 04 '16 at 04:05
Is the code (routes) and HTML in your question from the same component? – Günter Zöchbauer May 04 '16 at 04:08
Can you try to update this Plunker to allow to reproduce? https://plnkr.co/edit/yckJKY?p=preview – Günter Zöchbauer May 04 '16 at 06:48

disable/hide directive based on route Angular2

1 Answers1