Lily Design System™

Tutorial Angular

Komponen mandiri Angular 20 — input sinyal, deteksi owah-owahan OnPush, cithakan inline, nol NgModules, nol CSS.

Apa sing bakal sampeyan gawé

Formulir kontak cilik — kolom nganggo label, tombol kirim, pengikatan loro arah, prilaku keyboard lan pamaca layar sing nyata — dhisik polosan, banjur ditata, kira-kira 10 menit.

Sadurunge miwiti

Sampeyan butuh git, Node 22 utawa luwih anyar, lan pnpm 10 utawa luwih anyar. Proyek Angular 20 apa wae bisa — Angular CLI utawa Analog.

Langkah 1 — Njupuk kode

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 iku berkas rata ing components/ — Button.ts, TextInput.ts — saben siji komponen mandiri kanthi cithakan inline, ditambah spec lan story-né. Barrel index.ts ngekspor ulang saben komponen; pnpm build ngasilaké bundel Angular Package Format liwat ng-packagr.

Langkah 2 — Komponen pisanan sampeyan

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"); }
}

Saben komponen ndeklarasiké pamilih lily-* lan nampilaké unsur semantik kanthi pancingan kelas-é — <button class="button" type="button"> ing kéné. Input-é adhedhasar sinyal: label() kanggo aria-label kanggo nimpa, className() kanggo nambah kelas.

Langkah 3 — Nyusun formulir cilik

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 nampa label sing katon minangka input label dhéwé, dudu komponen label sing disarangaké — lulusna sepisan, ing kolom, lan lily-text-inputsing cocog saka label nyedhiyakaké jeneng sing bisa diakses. Komponen sing mirip input mbukak nilai model() dadi pengikatan loro arah banana-box [(value)] langsung mlaku — kompatibel karo zoneless ing sakabèhé.

Dikonfirmasi 2026-08-29: konsep sadurungé nyarangaké komponen Label kapisah ing njero lily-field, sing nampilaké rong label (siji kosong) amarga lily-field wis nampilaké dhéwé saka input label — ditemokaké kanthi mriksa kode sumber komponen. Rute formulir kontak gabungan iku pola sing padha, diuji nganggo tes e2e lan axe nyata.

Priksa pagawéan sampeyan: jalanna aplikasi lan formulir katon polosan — persis kaya sing dikarepaké: penataan isih ing ngarep. Pencet Tab: fokus mlaku liwat saben kontrol, label diumumaké lan kirim mlaku. Prilaku wis rampung; tampilan iku duwèkmu lan dadi langkah sabanjuré.

Langkah 4 — Tata

Tata pancingan kelas — .button, .text-input, .label, .field — ing styles.css, utawa tambahna tema sing wis siap menyang larik styles ing angular.json / sambungna ing index.html: 

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

Langkah 5 — Deleng kabèh mlaku

Aplikasi conto Angular + Analog nampilaké katalog lengkap kanthi rute adhedhasar berkas lan 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 sabanjuré

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.