It's frustrating that I can't change the visibility of a reusable directive in Angular2.
1) Let's say I have a login page.
I want to control the visibility of my navbar based on whether I am on the login page or logged in. It should be hidden on the login page and visible after logging in.
@Component({
selector: 'my-app',
template: `
<navbar [visible]="isLoggedIn"></navbar>
<div class="container">
<router-outlet></router-outlet>
</div>`,
directives: [NavbarComponent,ROUTER_DIRECTIVES]
})
In my app.component.ts file, I have set the initial value of isLoggedIn to false, which hides the navbar. Toggling between true and false works, indicating that it functions correctly from app.component.
isLoggedIn=false;
However, setting the visibility in my login page does not work as expected.
How do I communicate with the navbar component to update its visibility when I log in? I have added it as a provider, but even after setting this.isLoggedIn = true, the navbar remains hidden.
import { Component } from '@angular/core';
import ... (remaining content omitted for brevity)
Below is the code snippet for my navbar.compoment.ts:
import {Component, Input} from '@angular/core';
import ... (remaining content omitted for brevity)
And here is my navbar.html file:
<div *ngIf="visible">
<div class="dashhead">
<div class="dashhead-titles">
<h6 class="dashhead-subtitle">Bootops</h6>
<h3 class="dashhead-title">Role Builder</h3>
</div>
<div class="dashhead-toolbar">
<span class="dashhead-toolbar-divider hidden-xs"></span>
</div>
</div>
<ul class="nav nav-bordered">
<li [class.active]="isCurrentRoute(['Environments'])"><a
<li><a (click)="logout()">Logout</a></li>
</ul>
</div>