How do I selectively hide a navigation bar using Angular?
<p>We want to hide the login bar on the <code>login</code> page. The value in the template never changes, and the only page we want to hide the navigation is on the login-page.</p>

<p>The service that is called when the navigation bar should get enabled or disabled.
isAuthenticated.service:</p>

<pre><code>import {Injectable} from '@angular/core';
import {Observable}     from 'rxjs/Observable';

@Injectable()
export class isAuthenticatedService{

userLoggedIn : boolean = false;

//call this function when login status changes
changeLoginStatus(status: boolean){
    this.userLoggedIn = status;
    console.log("in changeLoginStatus: ", status);
}

getLoginStatus(){
    return this.userLoggedIn;
}
}
</code></pre>

<p>app.component:</p>

<pre><code>import {Component} from '@angular/core';
import {ProfilComponent} from './profil.component';
import {EditProfilComponent} from './editProfil.component';
import { HTTPService } from './http.service';
import {CookieService} from 'angular2-cookie/services/cookies.service';
import {Router} from '@angular/router';
import {isAuthenticatedService} from './isAuthenticated.service'

@Component({
selector: 'my-app',
templateUrl: './app/main.html',
providers: [HTTPService, CookieService, isAuthenticatedService]
})
export class AppComponent{
constructor(private _httpService: HTTPService, private _cookieService: CookieService, public router: Router, private _isAuthenticatedService: isAuthenticatedService){
    console.log(this.router.url);
}
};
</code></pre>

<p>Template that is used in app.component to display the navigation.</p>

<p>main.html:</p>

<pre><code>&lt;div [hidden]="_isAuthenticatedService.userLoggedIn"&gt;
&lt;nav class="navbar navbar-inverse"&gt;
&lt;div class="container-fluid"&gt;
&lt;div class="collapse navbar-collapse"&gt;
  &lt;ul class="nav navbar-nav"&gt;
    &lt;li&gt;&lt;a routerLink="/mainpage"&gt;Portal |&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a routerLink="/profil"&gt;Profil&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/"&gt;Unternehmen&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="nav navbar-nav navbar-right"&gt;
 &lt;div class="dropdown" style="float:right;"&gt;
&lt;button class="dropdown-toggle btn btn-primary" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" id ="profildd"&gt;Profil &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
    &lt;li&gt;&lt;a routerLink="/profil" routerLinkActive="active"&gt;Verwalten&lt;/a&gt;&lt;/li&gt;
    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="/download" routerLinkActive="active"&gt;Organisation&lt;/a&gt;&lt;/li&gt;
    &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a routerLink="/" (click)="logout()"&gt;Logout&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt; 
&lt;/div&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>
   </p>

<p>The function 'changeLoginStatus(boolean)' is called from the login component if the login was successfull. </p>

<p><strong>Edit 1: Changed Providers</strong></p>

<p>moved providers from app.component to app.module.ts</p>

<p>app.module.ts:</p>

<pre><code>@NgModule({
imports: [ 
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
  {path : '', component: LoginComponent},
  {path: 'mainpage', component: MainPageComponent},
  {path: 'profil', component: ProfilComponent},
  {path: 'editProfil', component: EditProfilComponent},
  {path: 'login', component: LoginComponent}
])

],

 declarations: [ AppComponent, ProfilComponent, EditProfilComponent, LoginComponent, MainPageComponent],
 providers : [
{       provide: XSRFStrategy,
        useValue: new CookieXSRFStrategy('XSRF-Token', 'XSRF-TOKEN')
}, isAuthenticatedService, CookieService, HTTPService],
bootstrap:    [ AppComponent ]

})
export class AppModule { }
</code></pre>