HttpClient & Fetching Data — CompileDaily Study

Penjelasan

HttpClient adalah service bawaan Angular untuk melakukan request HTTP, harus disediakan lewat provideHttpClient() di app.config.ts. Method-nya (mis. http.get()) mengembalikan Observable — dilanggan (subscribe) untuk mendapat hasilnya, hasil itu biasanya ditampung ke signal supaya template otomatis update.

Contoh Konsep

import { Component, signal, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
    selector: 'app-daftar-produk',
    standalone: true,
    template: `
        @if (loading()) {
            <p>Memuat...</p>
        } @else {
            @for (item of produk(); track item.id) {
                <li>{{ item.nama }}</li>
            }
        }
    `,
})
export class DaftarProdukComponent implements OnInit {
    produk = signal<any[]>([]);
    loading = signal(true);

    constructor(private http: HttpClient) {}

    ngOnInit() {
        this.http.get<any[]>('https://api.contoh.com/produk').subscribe({
            next: (data) => {
                this.produk.set(data);
                this.loading.set(false);
            },
            error: () => this.loading.set(false),
        });
    }
}

Praktikum

Buat component DaftarArtikelComponent dengan signal artikel dan loading. Di ngOnInit(), pakai HttpClient untuk fetch dari 'https://api.contoh.com/artikel', isi signal artikel saat sukses dan set loading ke false baik sukses maupun gagal.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Observable dari HttpClient TIDAK akan melakukan apa pun sampai kamu memanggil .subscribe() padanya — beda dengan Promise (fetch() biasa) yang langsung berjalan begitu dipanggil, ini kesalahan umum pemula yang bingung kenapa request-nya "tidak terkirim" padahal sudah menulis http.get().