Angular ट्यूटोरियल

रउआ का बनाईब

एगो छोट संपर्क फॉर्म — लेबल वाला क्षेत्र, जमा करे के बटन, दू-तरफा बाइंडिंग, असली कीबोर्ड आ स्क्रीन-रीडर व्यवहार — पहिले सादा, फेर शैली के साथे, करीब 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-संगत।

कदम 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

अगिला कदम

• थीम — Angular theme-picker सहायक से चलत समय बदलाव।
• पसंद सहायक — भाषा आ पाठ के आकार।
• घटक कैटलॉग — हर घटक खातिर गुण, ARIA आ कीबोर्ड।

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।