Create button spinner when clicked in angular 5

CE0 Published at Dev

CE0

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

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" style="background: #FF473A;">
  Sign In
  <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
</button>

and in component.ts

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;
    }
  }
}

okay my service.ts

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';

@Injectable() export class UserService {

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 => {
            let data = res.json();

            if (data.token) {
                this.loading = false;
                window.location.href = '/';
            }
            else {
                this.loading = false;
                this.router.navigateByUrl('/login');
            }

        }, error => {
            this.loading = false;
        })
};

and this is what i hope to achieve when clicked

Vikas

HttpModule is deprecated you must use the new HttpClientModule whcih by default formats the response to JSON so we no longer need to parse it using response.json():

Revised service code: Return Observable from your service and subscribe it in your component

    import { Injectable } from '@angular/core';
    import { HttpHeaders,HttpClient } from '@angular/common/http';
    import { Router } from '@angular/router';
    import { Globals } from '../shared/api';

    import { Observable } from 'rxjs/Observable';
    private loginUrl = this.globals.LOGIN_URL;
    private loggedIn = false;
    public loading: boolean = false;


    constructor(private http: HttpClient, private globals: Globals) { }

    login(email: string, password: string):Observable<any> {
       const headers = new HttpHeaders({'Content-Type':'application/json;})

    return this.http.post(this.loginUrl, JSON.stringify({ email, password }), { headers });
}

Revised Component:
Put the logic inside susbscribe call back to ensure that spinner goes off only when your request is resolved.

   export class LoginComponent implements onInit {
      constructor(private router:Router){}
      public 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).subscribe(res 
                => {
            let data = res;

            if (data.token) {
                this.loading = false;
                window.location.href = '/';
            }
            else {
                this.loading = false;
                this.router.navigateByUrl('/login');
            }

        }, error => {
            this.loading = false;
        });
}}

revised HTML

<button type="submit" class="btn  btn-accent btn-block btn-flat b-r-10" (click)="login()" style="background: #FF473A;">
      Sign In
      <i class="fa fa-spinner fa-spin" *ngIf="loading"></i>
    </button>

Collected from the Internet

Please contact [email protected] to delete if infringement.