*ngIf is not working

Question

i am using angular 2 RC 4 and *ngIf is not working here is the code for view

View

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
      <span class="navbar-brand"> </span>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a [routerLink]="['/Home']">Home</a>
        <span style="color:red">{{auth.isAdmin}}</span>
        <span style="color:red">{{auth.isLoggedIn}}</span>
        </li>
        
        <li *ngIf="auth.isLoggedIn && auth.isAdmin"><a [routerLink]="['/Category']">Category</a></li>
        <li *ngIf="auth.isLoggedIn && auth.isAdmin"><a [routerLink]="['/Products']">Product</a></li>
        <li *ngIf="auth.isLoggedIn && !auth.isAdmin"><a [routerLink]="['/BuyProduct']">Buy Products</a></li>
        <li *ngIf="auth.isLoggedIn && !auth.isAdmin"><a [routerLink]="['/Cart']"><i class="fa fa-shopping-cart"></i><span class="badge" >11</span></a></li>
        <!--<li *ngIf="isLoggedIn"><a [routerLink]="['/Folder']"><i class="fa fa-shopping-cart"></i><span class="badge" >Folder</span></a></li>-->
      </ul>
      <ul class="nav navbar-nav navbar-right" *ngIf="!auth.isLoggedIn">
        <!--<li><a href="#">{{isLoggedIn}} b</a></li>-->
        <li><a [routerLink]="['/Register']">Register</a></li>
        <li><a [routerLink]="['/Login']">Login</a></li>
      </ul>

      <ul class="nav navbar-nav navbar-right" *ngIf="auth.isLoggedIn">
        <!--<li><a href="#">{{isLoggedIn}} a</a></li>-->
        <li><a [routerLink]="['/Home']">Welcome {{auth.userName}}</a></li>
        <li><a [routerLink]="['/Login']" (click)="logOut()" >Log Out</a></li>
      </ul>

    </div>
  </div>
</div>
<div class="container ">
    <router-outlet></router-outlet>
  <hr />
  <footer>
    <p>&copy; My ASP.NET Application</p>
  </footer>
</div>

Component

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router'
import {  OnInit, OnDestroy} from '@angular/core';
//import '../../public/css/styles.css';

import {CategoryComponent} from './category.component';
import {ProductComponent} from './product.component';
import {HomeComponent} from './home.component';
import {BuyProductComponent} from './buyproduct.component';
import {CartComponent} from './cart.component';
import {LoginComponent} from './login.component';
import {RegisterComponent} from './register.component';
import {FolderComponent} from './folder.component';

import { AuthService }         from '../services/auth.service';



@Component({
  selector: 'my-app',
  templateUrl: '../views/app.component.html',
  directives: [ROUTER_DIRECTIVES],
  //it's bcoz of this error Component not found in precompile array.
  precompile: [CategoryComponent,
    ProductComponent,
    HomeComponent,
    BuyProductComponent,
    CartComponent,
    LoginComponent,
    RegisterComponent,
    FolderComponent
  ],
  
})

export class AppComponent implements OnInit {

  ngOnInit() {
    ////debugger;
    //console.log("in ngOnInit"); 
    this.auth = this.authService.getAuthData();
  }

  auth: any = {};
  constructor(private authService: AuthService) {
    console.log("in constructor");
    console.log('calling auth data from constructor');
    authService.authChanged$.subscribe(value => {
      console.log("from authchange");
      this.auth = value;
      console.log(value);
    });


    console.log("from app component " + authService.auth.isLoggedIn);
  }
  title = "App Component";

  logOut()
  {
    this.authService.resetAuthData();
  }
}

Screen shot in browser

Answer 1

Try this way -

*ngIf="!auth.isLoggedIn == true"

I know it is weird , but it worked for me