title: Create button spinner when clicked in angular 5
body: <p>I am trying to create a spinner when button is clicked but it seems its not being run, this is what i did in my component.html</p>
  
  <pre><code>&lt;button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" style="background: #FF473A;"&gt;
    Sign In
    &lt;i class="fa fa-spinner fa-spin" *ngIf="loading"&gt;&lt;/i&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>and in component.ts</p>
  
  <pre><code>export class LoginComponent implements onInit {
    private loading: boolean;
  
    //form ngSubmit function()
    login() {
      if (this.user.email, this.user.password) {
        this.loading = true;
        this.userSrv.login(this.user.email, this.user.password); //api call here
        this.loading = false;
      }
    }
  }
  </code></pre>
  
  <p>okay my service.ts</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Headers, RequestOptions } from '@angular/http';
  import { Router } from '@angular/router';
  import { Globals } from '../shared/api';
  import 'rxjs/add/operator/toPromise';
  import { Observable } from 'rxjs/Observable';
  </code></pre>
  
  <p>@Injectable()
  export class UserService {</p>
  
  <pre><code>private loginUrl = this.globals.LOGIN_URL;
  private loggedIn = false;
  public loading: boolean = false;
  
  
  constructor(private http: Http, private router: Router, private globals: Globals) { }
  
  login(email: string, password: string) {
      let headers = new Headers();
      this.loading = true;
      headers.append('Content-Type', 'application/json');
      return this.http.post(this.loginUrl, JSON.stringify({ email, password }), { headers })
          .subscribe(res =&gt; {
              let data = res.json();
  
              if (data.token) {
                  this.loading = false;
                  window.location.href = '/';
              }
              else {
                  this.loading = false;
                  this.router.navigateByUrl('/login');
              }
  
          }, error =&gt; {
              this.loading = false;
          })
  };
  </code></pre>
  
  <p>and this is what i hope to achieve when clicked</p>
  
  <p><a href="https://i.stack.imgur.com/Tcx6n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tcx6n.png" alt="enter image description here"></a></p>