Lily Design System™

Angular ट्यूटोरियल

Angular 20 स्वतंत्र घटक — सिग्नल इनपुट, OnPush बदलाव पहचान, इनलाइन टेम्पलेट, शून्य NgModules, शून्य CSS।

आप क्या बनाएँगे

एक छोटा संपर्क फ़ॉर्म — लेबल वाला क्षेत्र, सबमिट बटन, दो-तरफ़ा बाइंडिंग, असली कीबोर्ड और स्क्रीन-रीडर व्यवहार — पहले सादा, फिर शैलीबद्ध, लगभग 10 मिनट में।

शुरू करने से पहले

आपको git, Node 22 या नया, और pnpm 10 या नया चाहिए। कोई भी Angular 20 प्रोजेक्ट चलेगा — Angular CLI या Analog।

चरण 1 — कोड प्राप्त करें

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

घटक यहाँ सपाट फ़ाइलों के रूप में हैं: components/ — Button.ts, TextInput.ts — प्रत्येक इनलाइन टेम्पलेट वाला स्वतंत्र घटक है, साथ में उसका spec और story। बैरल index.ts हर घटक को दोबारा निर्यात करता है; pnpm build ng-packagr के माध्यम से Angular Package Format बंडल बनाता है।

चरण 2 — आपका पहला घटक

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

हर घटक एक lily-* चयनकर्ता घोषित करता है और अपने क्लास हुक के साथ अर्थपूर्ण तत्व दिखाता है — <button class="button" type="button"> यहाँ। इनपुट सिग्नल-आधारित हैं: label() के लिए aria-label अधिलेखित करने के लिए, className() क्लास जोड़ने के लिए।

चरण 3 — एक छोटा फ़ॉर्म बनाएँ

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 दिखने वाले लेबल को अपने label इनपुट के रूप में लेता है, भीतर रखे लेबल घटक के रूप में नहीं — इसे एक बार क्षेत्र पर दें, और मेल खाता lily-text-inputका label सुलभ नाम देता है। इनपुट जैसे घटक model() मान उजागर करते हैं, इसलिए banana-box [(value)] दो-तरफ़ा बाइंडिंग तुरंत काम करती है — हर जगह zoneless-संगत।

2026-08-29 को सत्यापित: पिछले मसौदे ने अलग Label घटक को lily-fieldके भीतर रखा था, जिससे दो लेबल (एक खाली) दिखे क्योंकि lily-field पहले से अपना label इनपुट से दिखा देता है — घटक का स्रोत कोड जाँचकर पता चला। संयुक्त संपर्क-फ़ॉर्म रूट वही पैटर्न है, असली e2e और axe परीक्षणों से परखा हुआ।

अपना काम जाँचें: ऐप चलाएँ और फ़ॉर्म सादा दिखता है — ठीक वैसा ही जैसा इरादा था: शैली अभी आगे है। दबाएँ Tab: फ़ोकस हर नियंत्रण से गुज़रता है, लेबल घोषित होता है और सबमिट काम करता है। व्यवहार पूरा है; रूप आपका है और अगला चरण है।

चरण 4 — इसे शैली दें

क्लास हुक को शैली दें — .button, .text-input, .label, .field — इसमें styles.css, या कोई तैयार थीम सारणी में जोड़ें styles में angular.json / इसे यहाँ लिंक करें index.html: 

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

चरण 5 — सब कुछ चलते हुए देखें

Angular + Analog उदाहरण ऐप फ़ाइल-आधारित रूटिंग और Vite के साथ पूरा कैटलॉग दिखाता है: 

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

अगले चरण

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।