title: Angular 2- using *ngIf with multiple conditions
body: <p>I'm unable to selectively display links on my nav-bar.
  Based on who logs in (user or admin), I want to change which link shows on my nav-bar.</p>
  
  <p>Below is the code for one such instance where the user/admin logs out. </p>
  
  <p><strong>In navbar.component.html -</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li *ngIf="authService.userLoggedIn()== true &amp;&amp; authService.adminLoggedIn() == false" 
         [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"&gt; 
    &lt;a (click)="onUserLogoutClick()" href="#"&gt;Logout&lt;/a&gt;
  &lt;/li&gt;
  
  &lt;li *ngIf="(authService.adminLoggedIn() == true) &amp;&amp; (authService.userLoggedIn() == false)" 
        [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"&gt;
     &lt;a (click)="onAdminLogoutClick()" href="#"&gt;Logout&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Both <code>authService.adminLoggedIn()</code> and <code>authService.userLoggedIn()</code> return <code>tokenNotExpired;</code></p>
  
  
  
  <p>Below is the relevant code in the <strong>navbar.component.ts -</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code> onUserLogoutClick() {
     this.authService.userLogout();
     this.flashMessage.show('You are now logged out', {cssClass: 'alert-success', timeout: 3000});
     this.router.navigate(['/login']);
     return false;   
   }
  
   onAdminLogoutClick() {
     this.authService.adminLogout();
     this.flashMessage.show('Administrator now logged out', {cssClass: 'alert-success', timeout: 3000});
     this.router.navigate(['/admin']);
     return false;   
   }
  </code></pre>
  
  <p>The <code>authService.adminLogout()</code> and <code>authService.userLogout()</code> just clears the token stored in local storage.</p>
  
  <p>I apologize in advance if the mistake that I've made is silly. I'm new to Angular.</p>