Lily Design System™

Tutorial Angular

Komponen mandiri Angular 20 — input sinyal, deteksi perubahan OnPush, templat inline, nol NgModules, nol CSS.

Apa yang akan Anda bangun

Formulir kontak kecil — kolom berlabel, tombol kirim, pengikatan dua arah, perilaku papan ketik dan pembaca layar yang nyata — pertama polos, lalu bergaya, dalam sekitar 10 menit.

Sebelum memulai

Anda memerlukan git, Node 22 atau lebih baru, dan pnpm 10 atau lebih baru. Proyek Angular 20 mana pun bisa — Angular CLI atau Analog.

Langkah 1 — Dapatkan kodenya

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-headless
pnpm install
pnpm test        # vitest + TestBed, all 571 components
pnpm run build-storybook

Komponen berupa berkas datar di components/ — Button.ts, TextInput.ts — masing-masing komponen mandiri dengan templat inline, plus spec dan story-nya. Barrel index.ts mengekspor ulang setiap komponen; pnpm build menghasilkan bundel Angular Package Format melalui ng-packagr.

Langkah 2 — Komponen pertama Anda

import { Component } from "@angular/core";
import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-save-bar",
  standalone: true,
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})
export class SaveBar {
  save() { console.log("saved"); }
}

Setiap komponen mendeklarasikan selektor lily-* dan merender elemen semantik dengan kait kelasnya — <button class="button" type="button"> di sini. Input berbasis sinyal: label() untuk sebuah aria-label untuk menimpa, className() untuk menambahkan kelas.

Langkah 3 — Susun formulir kecil

import { Component, signal } from "@angular/core";
import { Form, Field, TextInput, Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-contact-form",
  standalone: true,
  imports: [Form, Field, TextInput, Button],
  template: `
    <lily-form label="Contact form" (submit)="handleSubmit($event)">
      <lily-field label="Full name" [required]="true">
        <lily-text-input id="name" label="Full name" [(value)]="name" />
      </lily-field>
      <lily-button type="submit">Save</lily-button>
    </lily-form>
  `,
})
export class ContactForm {
  name = signal("");
}

lily-field menerima label yang terlihat sebagai input label miliknya sendiri, bukan komponen label bersarang — teruskan sekali, di kolom, dan lily-text-inputyang cocok dari label memberikan nama yang dapat diakses. Komponen mirip input mengekspos nilai model() sehingga pengikatan dua arah banana-box [(value)] langsung bekerja — kompatibel dengan zoneless sepenuhnya.

Diverifikasi 2026-08-29: draf sebelumnya menyarangkan komponen Label terpisah di dalam lily-field, yang merender dua label (satu kosong) karena lily-field sudah merender labelnya sendiri dari input label — ditemukan dengan memeriksa kode sumber komponen. Rute formulir kontak gabungan adalah pola yang sama, diuji dengan pengujian e2e dan axe yang nyata.

Periksa pekerjaan Anda: jalankan aplikasi dan formulir tampak polos — persis seperti yang dimaksudkan: penataan gaya masih akan datang. Tekan Tab: fokus berpindah melalui setiap kontrol, label diumumkan, dan pengiriman berfungsi. Perilakunya selesai; tampilan adalah milik Anda dan menjadi langkah berikutnya.

Langkah 4 — Beri gaya

Beri gaya pada kait kelas — .button, .text-input, .label, .field — di styles.css, atau tambahkan tema siap pakai ke larik styles di angular.json / tautkan di index.html: 

<link rel="stylesheet" href="/themes/adobe-spectrum.css" />

Langkah 5 — Lihat semuanya bekerja

Aplikasi contoh Angular + Analog menampilkan katalog lengkap dengan perutean berbasis berkas dan Vite: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-examples
pnpm install && pnpm run dev

Langkah berikutnya

Ada pertanyaan di tengah jalan? Halaman bantuan penuh jawaban — dan jika suatu langkah bisa lebih jelas, beri tahu kami dan kami dengan senang hati akan memperbaiki tutorial ini.