title: *ngIf on component class variable in angular2
body: <p>I want to show loader when the flag variable is true and hide it when flag is false (two way data binding), but I dont know how to use *ngIf with component variable</p>
  
  <p><strong><em>app.component.ts</em></strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { User } from '../../models/users.model';
  import { UserServices } from '../../services/User.service';
  @Component({
      selector: 'app-default',
      templateUrl: './default.component.html',
      styleUrls: ['./default.component.css']
  })
  export class defaultComponent implements OnInit {
      public flag: boolean;
      userList: User[];
      constructor(private _service: UserServices) {
          this.flag = true;
      }
      ngOnInit() {
          this.getData();
      }
      getData() {
          this.flag = true;
          this._service.loadData().subscribe( response =&gt; { this.userList = response; });
          this.flag = false;
      }
  }
  </code></pre>
  
  <p><strong><em>default.component.html</em></strong></p>
  
  <pre><code>    &lt;div *ngIf="flag == true" class="loader"&gt;Loading...&lt;/div&gt;
      &lt;div class="content"&gt;
          &lt;!--my html--&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I want to show loader div only when service is call and hide it after call compeleted.</p>