Lily Design System™

Angular-Tutorial

Angular 20 eegestänneg Komponenten — Signal-Inputen, OnPush-Ännerungserkennung, agebonne Schablounen, null NgModules, null CSS.

Wat Dir bauen wäert

E klengt Kontaktformulaire — Feld mat Etikett, Schécken-Knäppchen, Zwee-Weeër-Bindung, richtegt Tastatur- an Écranliesser-Verhalen — fir d'éischt nackeg, duerno gestalt, an ongeféier 10 Minutten.

Ier Dir ufänkt

Dir braucht git, Node 22 oder méi nei a pnpm 10 oder méi nei. All Angular 20 Projet funktionéiert — Angular CLI oder Analog.

Schrëtt 1 — D'Code kréien

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

D'Komponenten sinn flaach Dateien am components/ — Button.ts, TextInput.ts — jidd ass eng eegestänneg Komponent mat agebonner Schabloun, plus hir Spec a Story. De Barrel index.ts exportéiert all Komponent nach eng Kéier; pnpm build produzéiert e Package a Form vum Angular Package Format iwwer ng-packagr.

Schrëtt 2 — Är éischt Komponent

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

All Komponent deklaréiert e lily-* Selector a rendert dat semantescht Element mat sengem Klassen-Hook — <button class="button" type="button"> hei. D'Inputen baséieren op Signaler: label() fir en aria-label zum Iwwerschreiwen, className() fir Klassen unzehänken.

Schrëtt 3 — E klengt Formulaire zesummestellen

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 hëlt dat siichtbart Etikett als säin eegenen label -Input amplaz vun enger verschachtelter Etikett-Komponent — gitt et eemol weider, um Feld, an dat passend lily-text-inputvun label liwwert den zougänglechen Numm. Input-ähnlech Komponente stellen model() -Wäerter zur Verfügung, sou datt banana-box [(value)] -Zwee-Weeër-Bindung direkt funktionéiert — duerchgängeg zoneless-kompatibel.

Gepréift den 2026-08-29: en ale Brouillon huet eng separat Label -Komponent an lily-fieldverschachtelt, wat zwee Etiketten (eng eidel) gerendert huet, well lily-field schonn säin eegenen aus dem label -Input rendert — entdeckt duerch d'Kontroll vum Quellcode vun der Komponent. Déi zesummegesat Kontaktformulaire-Route ass datselwecht Muster, getest mat richtegen e2e- an axe-Tester.

Kontrolléiert Är Aarbecht: start d'App an d'Formulaire gesäit nackeg aus — genee wéi geduecht: d'Gestaltung kënnt nach. Dréckt Tab: de Fokus geet duerch all Kontroll, d'Etikett gëtt ugekënnegt an d'Schécken funktionéiert. D'Verhalen ass fäerdeg; d'Ausgesi ass Är a kënnt als Nächst.

Schrëtt 4 — Gestalt et

Gestalt d'Klassen-Hooks — .button, .text-input, .label, .field — am styles.css, oder füügt en fäerdegt Thema an d'Array styles am angular.json / verlinkt et am index.html: 

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

Schrëtt 5 — Alles am Aktioun gesinn

Angular + Analog Beispill-App weist de ganze Katalog mat dateibaséierter Routing a Vite: 

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

Nächst Schrëtt

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.