การสร้าง Loading Bar ใน Angular

การเพิ่ม Loading Bar ช่วยให้ผู้ใช้รู้สึกว่ามีการโหลดข้อมูลหรือกำลังประมวลผลอยู่ในขณะนั้น ซึ่งช่วยปรับปรุงประสบการณ์การใช้งาน (UX) และการสลับหน้า (routing) หรือโหลดข้อมูลจาก API

ในบทความนี้เราจะมาสร้าง Loading Bar ใน Angular โดยใช้ Service และ Component เพื่อควบคุมสถานะการแสดงผลของ Loading Bar

---

ขั้นตอนการสร้าง

1. สร้าง LoadingBarService

เริ่มต้นจากการสร้าง LoadingBarService ที่ทำหน้าที่ในการควบคุมสถานะการแสดงผลของ Loading Bar เราจะใช้ BehaviorSubject ซึ่งช่วยให้สามารถแชร์สถานะระหว่างส่วนต่างๆ ของแอปได้ โดยการเปลี่ยนแปลงสถานะจะทำให้ทุกๆ Component ที่สมัคร (subscribe) รับข้อมูลทันที

// loading-bar.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class LoadingBarService {
  private loadingSubject = new BehaviorSubject<boolean>(false);

  loading$ = this.loadingSubject.asObservable();

  loadingOn() {
    this.loadingSubject.next(true);
  }

  loadingOff() {
    this.loadingSubject.next(false);
  }
}

ใน LoadingBarService นี้เราจะมีสองฟังก์ชันหลักคือ loadingOn() สำหรับเริ่มแสดงแถบโหลด และ loadingOff() สำหรับซ่อนแถบโหลด โดยเราจะใช้ BehaviorSubject เพื่อให้ทุกคอมโพเนนต์ที่สมัครรับข้อมูลได้รับสถานะของแถบโหลดอย่างต่อเนื่อง

---

2. สร้าง LoadingBarComponent

ในขั้นตอนถัดไปเราจะสร้าง LoadingBarComponent ซึ่งจะทำหน้าที่ในการแสดงแถบโหลดตามสถานะที่ได้รับจาก LoadingBarService โดย Component นี้จะ subscribe จาก loading$ และใช้ *ngIf เพื่อแสดงหรือซ่อนแถบโหลดตามสถานะ

// loading-bar.component.ts
import { Component } from '@angular/core';
import { LoadingBarService } from './loading-bar.service';

@Component({
  selector: 'app-loading-bar',
  templateUrl: './loading-bar.component.html',
  styleUrls: ['./loading-bar.component.scss'],
})
export class LoadingBarComponent {
  isLoading = false;

  constructor(private loadingService: LoadingBarService) {
    this.loadingService.loading$.subscribe((loading) => {
      this.isLoading = loading;
    });
  }
}

HTML สำหรับแสดงแถบโหลด:

<!-- loading-bar.component.html -->
<div *ngIf="isLoading" class="loading-bar"></div>

CSS สำหรับแถบโหลด:

/* loading-bar.component.scss */
.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #29d;
  z-index: 10000;
  animation: loading-bar 2s infinite linear;
}

@keyframes loading-bar {
  0% { width: 0%; }
  50% { width: 50%; }
  100% { width: 100%; }
}

---

3. สร้างโมดูลสำหรับ LoadingBarComponent

เพื่อให้โค้ดของคุณมีความชัดเจนและง่ายต่อการจัดการ เราจะสร้าง LoadingBarModule ซึ่งจะประกอบไปด้วย LoadingBarComponent และ LoadingBarService เพื่อให้สามารถใช้ในแอปพลิเคชันได้อย่างสะดวก

// loading-bar.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoadingBarComponent } from './loading-bar.component';
import { LoadingBarService } from './loading-bar.service';

@NgModule({
  declarations: [LoadingBarComponent],
  imports: [CommonModule],
  providers: [LoadingBarService],
  exports: [LoadingBarComponent],
})
export class LoadingBarModule {}

---

4. การใช้ LoadingBarComponent ในแอป

สุดท้าย คุณสามารถเพิ่ม LoadingBarComponent ใน app.component.html หรือคอมโพเนนต์หลักของแอปของคุณเพื่อแสดงแถบโหลดขณะทำการสลับ Route หรือโหลดข้อมูลจาก API

<!-- app.component.html -->
<app-loading-bar></app-loading-bar>
<router-outlet></router-outlet>

---

5. การควบคุมสถานะของ Loading Bar

ในการควบคุมสถานะของ Loading Bar เราสามารถใช้ LoadingBarService ที่เราสร้างไว้ในคอมโพเนนต์อื่นๆ เพื่อเริ่มและหยุดแถบโหลดตามต้องการ เช่น เมื่อทำการเรียก API หรือเมื่อเริ่มและเสร็จสิ้นการสลับ Route:

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';
import { LoadingBarService } from './loading-bar.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private loadingService: LoadingBarService
  ) {}

  ngOnInit() {
    this.router.events.subscribe((event) => {
      if (event instanceof NavigationStart) {
        this.loadingService.loadingOn(); // เริ่มแสดงแถบโหลดเมื่อเริ่มการสลับ route
      } else if (event instanceof NavigationEnd || event instanceof NavigationError) {
        this.loadingService.loadingOff(); // หยุดแสดงแถบโหลดเมื่อการสลับ route เสร็จ
      }
    });
  }
}

---

สรุป

ในบทความนี้เราได้สร้าง Loading Bar ใน Angular โดยไม่ใช้ไลบรารีภายนอก โดยใช้ Service และ Component เพื่อควบคุมสถานะการแสดงผลของแถบโหลด การใช้ BehaviorSubject ใน LoadingBarService ช่วยให้การควบคุมสถานะการโหลดในแอปพลิเคชันเป็นไปอย่างมีประสิทธิภาพและยืดหยุ่น นอกจากนี้การสร้างโมดูลแยกยังช่วยให้โค้ดของคุณมีความสะอาดและสามารถนำกลับมาใช้ใหม่ได้ง่าย