Lily Design System™

Angular oktatóanyag

Angular 20 önálló komponensek — jelzőbemenetek, OnPush változásészlelés, beágyazott sablonok, nulla NgModule, nulla CSS.

Mit fogsz építeni

Egy kis kapcsolatfelvételi űrlap — címkézett mező, küldés gomb, kétirányú kötés, valódi billentyűzet- és képernyőolvasó-viselkedés — először csupaszon, aztán stílusosan, nagyjából 10 perc alatt.

Mielőtt elkezdenéd

Szükséged van gitre, Node 22-re vagy újabbra és pnpm 10-re vagy újabbra. Bármelyik Angular 20 projekt megfelel — Angular CLI vagy Analog.

1. lépés — Szerezd meg a kódot

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

A komponensek lapos fájlok itt: components/ — Button.ts, TextInput.ts — mindegyik önálló komponens beágyazott sablonnal, plusz a hozzá tartozó spec és story. A barrel index.ts újra exportál minden komponenst; pnpm build az ng-packagr segítségével Angular Package Format csomagot készít.

2. lépés — Az első komponensed

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

Minden komponens egy lily-* szelektort deklarál, és a szemantikus elemet rendereli az osztálykampójával — <button class="button" type="button"> itt. A bemenetek jelzőalapúak: label() az aria-label felülíráshoz, className() osztályok hozzáfűzéséhez.

3. lépés — Állíts össze egy kis űrlapot

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 a látható címkét a saját label bemeneteként veszi át beágyazott címkekomponens helyett — add át egyszer, a mezőnél, és a hozzá tartozó lily-text-inputa label biztosítja a hozzáférhető nevet. A beviteli mezőszerű komponensek model() értékeket tesznek közzé, így a banana-box [(value)] kétirányú kötés rögtön működik — végig zoneless-kompatibilis.

Ellenőrizve 2026-08-29: egy korábbi vázlat külön Label komponenst ágyazott be a lily-fieldelembe, ami két címkét renderelt (az egyik üres), mert a lily-field már magától rendereli a sajátját a label bemenetből — a komponens forráskódjának ellenőrzésével derült ki. Az összeállított kapcsolatfelvételi űrlap útvonala ugyanez a minta, valódi e2e- és axe-tesztekkel kipróbálva.

Ellenőrizd a munkádat: indítsd el az alkalmazást, és az űrlap csupasznak látszik — pontosan úgy, ahogy szántuk: a stílus még hátravan. Nyomd meg a Tabbillentyűt: a fókusz végigmegy minden vezérlőn, a címkét bemondja, és a küldés működik. A viselkedés kész; a megjelenés a tiéd, és a következő lépés.

4. lépés — Stílus hozzá

Stílusozd az osztálykampókat — .button, .text-input, .label, .field — itt: styles.css, vagy adj hozzá egy kész témát a tömbhöz styles itt: angular.json / hivatkozd itt: index.html: 

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

5. lépés — Nézd meg, ahogy az egész működik

Az Angular + Analog példaalkalmazás a teljes katalógust mutatja fájlalapú útválasztással és Vite-tel: 

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

További lépések

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.