Tutorial de Angular

O que vai construir

Um pequeno formulário de contacto — campo com etiqueta, botão de envio, ligação bidirecional, comportamento real de teclado e leitor de ecrã — primeiro simples, depois estilizado, em cerca de 10 minutos.

Antes de começar

Precisa de git, Node 22 ou posterior e pnpm 10 ou posterior. Qualquer projeto Angular 20 serve — Angular CLI ou Analog.

Passo 1 — Obter o código

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

Os componentes são ficheiros planos em components/ — Button.ts, TextInput.ts — cada um é um componente independente com modelo em linha, mais o seu spec e a sua story. O barrel index.ts reexporta cada componente; pnpm build produz um pacote no Angular Package Format através do ng-packagr.

Passo 2 — O seu primeiro componente

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

Cada componente declara um seletor lily-* e renderiza o elemento semântico com o seu gancho de classe — <button class="button" type="button"> aqui. As entradas são baseadas em sinais: label() para um aria-label para substituir, className() para acrescentar classes.

Passo 3 — Componha um pequeno formulário

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 recebe a etiqueta visível como a sua própria entrada label em vez de um componente de etiqueta aninhado — passe-a uma vez, no campo, e o lily-text-inputcorrespondente de label fornece o nome acessível. Os componentes semelhantes a entradas expõem valores model() pelo que a ligação bidirecional banana-box [(value)] funciona de imediato — compatível com zoneless de ponta a ponta.

Passo 4 — Estilize-o

Estilize os ganchos de classe — .button, .text-input, .label, .field — em styles.css, ou adicione um tema pronto à matriz styles em angular.json / ligue-o em index.html:

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

Passo 5 — Veja tudo a funcionar

A aplicação de exemplo Angular + Analog mostra o catálogo completo com encaminhamento baseado em ficheiros e Vite:

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

Passos seguintes

• Temas — alternância em tempo de execução com o auxiliar theme-picker do Angular.
• Auxiliares de preferências — idioma e tamanho do texto.
• Catálogo de componentes — propriedades, ARIA e teclado por componente.

Dúvidas pelo caminho? A página de ajuda está cheia de respostas — e se algum passo puder ser mais claro, diga-nos e melhoraremos o tutorial com todo o gosto.