Membuat Komponen Standalone Angular untuk Kartu Statistik

Dashboard biasanya menampilkan beberapa kartu dengan struktur sama: label dan angka. Menyalin markup membuat perubahan desain harus dilakukan di banyak tempat. Komponen kecil membantu menjaga tampilan tetap konsisten.

Contoh berikut menggunakan Angular modern yang mendukung standalone component dan signal input. Buat dua file pada direktori yang sama. Kartu hanya menerima data; pengambilan data tetap menjadi tanggung jawab komponen induk. Dengan demikian, kartu dapat digunakan untuk jumlah artikel, pembaca, atau jurnal.

Contoh implementasi

// statistic-card.ts
import { Component, input } from '@angular/core';

@Component({
  selector: 'app-statistic-card',
  standalone: true,
  template: `<article><h2>{{ label() }}</h2><p>{{ value() }}</p></article>`,
})
export class StatisticCard {
  label = input.required<string>();
  value = input.required<number>();
}

// dashboard.ts
import { Component } from '@angular/core';
import { StatisticCard } from './statistic-card';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [StatisticCard],
  template: `<app-statistic-card label="Articles" [value]="42" />`,
})
export class Dashboard {}

Cara memeriksa

Tampilkan Dashboard melalui root component atau route aplikasi yang sudah ada. Kartu harus menampilkan “Articles” dan angka 42. Tambahkan kartu kedua dengan nilai berbeda untuk memastikan keduanya bekerja secara independen.

Input dibaca menggunakan tanda kurung karena nilainya berupa signal. Gunakan [value]="42" agar Angular menerima angka, bukan teks. Saat sebuah komponen dipakai di template standalone, masukkan kelasnya ke imports komponen pemakai.

Latihan

Tambahkan input description opsional dengan nilai awal string kosong. Tampilkan deskripsi hanya jika terisi. Hindari memasukkan HTTP request ke kartu ini agar komponen tetap mudah digunakan kembali.

Referensi

Dokumentasi resmi