A better way to handle spinner in Angular with RxJS

Angular

In any application now days, every time a Client want to make a request to Backend service, we would like to have a spinner to visualize to our user. But why do we have to make a spinner?

You can find the answer in RAIL Model,

Lets jump straight to the implementation,

1. Import HttpClientModule, and ReactiveFormsModule into your Module, so that we can make a http request and Reactive Form.

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule , ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, HttpClientModule, ReactiveFormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

2. Include Bootstrap 4 CDN to index.html.

// index.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
 <my-app>loading</my-app>
</div>

3. In our component class, create a properties that manage the state of spinner. Usually I will name the properties prefix with is-, because it is a boolean type. But you can go anything you like. After that we will create a Reactive form with title and body properties.

// app.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public myForm: FormGroup;
  public isSaving = false

  constructor(
    private http: HttpClient,
    private formBuilder: FormBuilder,
  ) {
    this.myForm = this.formBuilder.group({
      title: ['', Validators.required],
      body: ['', Validators.required]
    })
  }

}

4. And last but not least, in our .html file.

// app.component.html
<form novalidate [formGroup]="myForm" (submit)="onSubmit()">
    <div class="form-group">
        <label for="title">Title: </label>
        <input type="text" 
               class="form-control" 
               id="title"  
               placeholder="Enter title" 
               formControlName="title">
    </div>

    <div class="form-group">
        <label for="body">Body: </label>
        <textarea type="text"
                  class="form-control"
                  id="body"
                  placeholder="Enter any message"
                  formControlName="body"
        ></textarea>
    </div>

    <button
        type="submit"
        class="btn btn-primary float-right"
        [disabled]="myForm.invalid"
    >
        <ng-container *ngIf="isSaving; else defaultText">
            <div class="loader"></div>
        </ng-container>

    </button>
</form>

<ng-template #defaultText>Submit</ng-template>

If you look at child of <button> you will notice that there is *ngIf. If isSavingis set to true, it will render its child which is <div class="loader"></div>, otherwise it will render defaultText template which is Submit .

We have one last things to do which is how to handle when user submit the form

// inside app.component.ts
// import finalize at the top of your file
import { finalize } from 'rxjs/operators';
...
onSubmit() {
  this.isSaving = true;
  // dummy link to post
  const url = 'https://jsonplaceholder.typicode.com/fakeapiroute';

  this.http.post(url, this.myForm.value).pipe(
    finalize(() => this.isSaving = false),
  ).subscribe();
}

So every time user press submit we will run onSubmit() , we will set the isSaving=true and when the request is done, finalize() will be called and we set back isSaving=false.

I created and example in Stackblitz, so you can play around

Thats all. 😛