Cara Mengimplementasikan Loader Global Di Angular

Saat program Angular Anda melakukan tugas asinkron, seperti mengambil data dari server API atau beralih antar jalur, sebaiknya tampilkan indikator berputar untuk memberitahu pengguna bahwa program sedang dimuat. Pada artikel berikut, saya akan mendemonstrasikan langkah membuat loader global yang menampilkan spinner menggunakan interceptor HTTP dan component spinner.

Cara 1: Buat service loader

Langkah pertama ialah membuat service loader yang akan mengelola status loaderan program kita. Kita bisa menggunakan Angular CLI untuk menghasilkan service:

ng generate service loader

LoaderService menyediakan fungsionalitas untuk menampilkan dan menyembunyikan loader di monitor. Itu melacak jumlah permintaan API yang sedang berlangsung dan menampilkan loader jika setidaknya ada satu permintaan API yang berlangsung.

Service loader akan memiliki dua metode: showLoader dan hideLoader.

showLoader(): Metode ini digunakan untuk menampilkan loader. Ini pertama kali mengecek apakah apiCount ialah nol, menunjukkan bahwa tidak ada permintaan API yang berjalan. Bila apiCount bernilai nol, ini menetapkan nilai isLoadingSubject menjadi true, yang menunjukkan bahwa loader harus ditampilkan. Ini kemudian menaikkan apiCount untuk menunjukkan jika ada satu permintaan API yang diproses.

hideLoader(): Metode ini digunakan untuk menyembunyikan loader. Itu mengurangi apiCount untuk menunjukkan jika permintaan API sudah selesai. Bila apiCount sekarang nol, yang menunjukkan jika tidak ada permintaan API yang diproses, nilai isLoadingSubject akan disetel ke false, yang menunjukkan jika loader harus disembunyikan.

Berikut code untuk service loader kami:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  private apiCount = 0;
  private isLoadingSubject = new BehaviorSubject<boolean>(false);
  isLoading$ = this.isLoadingSubject.asObservable();

  constructor() { }

  showLoader() {
    if (this.apiCount === 0) {
      this.isLoadingSubject.next(true);
    }
    this.apiCount++;
  }

  hideLoader() {
    this.apiCount--;
    if (this.apiCount === 0) {
      this.isLoadingSubject.next(false);
    }
  }
}

Cara 2: Create a spinner component

Cara selanjutnya adalah membuat component spinner yang akan menampilkan loading spinner di layar. Kita dapat menggunakan Angular CLI untuk menghasilkan component:

ng generate component spinner

component spinner akan menggunakan service loader untuk mendapatkan status loaderan dan menampilkan atau menyembunyikan spinner yang sesuai. Kami akan menggunakan Angular Material untuk membuat spinner simpel dengan efek overlay.

Berikut code untuk file TypeScript component spinner kami:

import { Component, ViewEncapsulation } from '@angular/core';
import { LoaderService } from '../loader.service';

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.css'],
  encapsulation: ViewEncapsulation.ShadowDom
})
export class SpinnerComponent {
  constructor(public loader: LoaderService) { }
}

Dan berikut adalah kode untuk file HTML component spinner kita:

<div *ngIf="(loader.isLoading$ | async)" class="spinner-overlay">
   <mat-spinner diameter="50"></mat-spinner>
</div>

Dan berikut adalah kode untuk file CSS component spinner kami:

.spinner-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 9999;
}

Cara 3: Create an HTTP interceptor

Cara terakhir ialah membuat interceptor HTTP yang akan mencegat semua permintaan dan respons HTTP dan mengatur status loaderan yang sesuai. Kita dapat menggunakan Angular CLI untuk menghasilkan interceptor:

ng generate interceptor interceptors/loader

interceptor akan menggunakan service loader untuk menyetel status loaderan ke true saat permintaan dikirim dan menyetelnya ke false saat respons diterima atau terjadi kesalahan. Kami akan menggunakan operator RxJS untuk menangani aliran yang dapat diamati.

Berikut code untuk interceptor kami:

import { Injectable } from '@angular/core';
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { LoaderService } from '../loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
  
  constructor(private loader: LoaderService) {}
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    this.loaderService.showLoader();
    return next.handle(request).pipe(
      finalize(() => this.loaderService.hideLoader())
    );
  }
}

Cara 4: Register the interceptor and add the spinner component

Hal terakhir yang perlu kita lakukan adalah mendaftarkan interceptor kita di modul aplikasi kita dan menambahkan component spinner kita ke component aplikasi kita.

Inilah cara kami mendaftarkan interceptor kami di modul aplikasi kami:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

import { AppComponent } from './app.component';
import { SpinnerComponent } from './spinner/spinner.component';
import { LoaderInterceptor } from './interceptors/loader.interceptor';

@NgModule({
  declarations: [
    AppComponent,
    SpinnerComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatProgressSpinnerModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: LoaderInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Dan inilah cara kami menambahkan component spinner ke file HTML component aplikasi kami:

<app-spinner></app-spinner>
<!-- The rest of your app content -->

Kesimpulan

Kami telah berhasil mengimplementasikan global loader di Angular menggunakan HTTP interceptor dan component spinner. Sekarang, setiap kali aplikasi kita membuat permintaan HTTP atau menerima respons, kita akan melihat indikator berputar di layar. Ini akan meningkatkan pengalaman pengguna dan feedback dari aplikasi kami.