CODEWITHSUNDEEP
javascriptangularangular5
CE0
CE0

Reputation: 191

Create button spinner when clicked in angular 5

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

enter image description here

Upvotes: 2

Views: 26647

Answers (3)

Niraj Motiani
Niraj Motiani

Reputation: 71

ng-if did not work for me for whatever reason. Another solution is:

  1. Use button-spinner instead of input for spinning buttons
  2. Tag the spinning button by the id <button-spinner id="btn1">
  3. In the callbacks in the controller, use broadcast and id of the button $scope.$broadcast('btnSpinnerSuccess', 'btn1');

step 3 goes in the method that is called on click of btn1

Upvotes: 0

Vikas
Vikas

Reputation: 12036

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>

Upvotes: 5

Sanoj_V
Sanoj_V

Reputation: 2986

First in your component.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>

And now you could put this.loading=false; in subscriber like this:

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)
      .subscribe((res: any) =>  {
               this.loader = false;
               //check your condition here and redirect to 
          },
           (error) => {
              this.loader = false;
        });
        }
     }
  }

In your service.ts file like:

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

Hope this will help you !

Upvotes: 2

Related Questions