Lily Design System™

Angular ट्युटोरियल

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

तुम्ही काय बनवाल

एक छोटा संपर्क फॉर्म — लेबल असलेले क्षेत्र, सबमिट बटण, द्विदिशा बाइंडिंग, खरे कीबोर्ड आणि स्क्रीन-रीडर वर्तन — आधी साधा, मग शैलीबद्ध, सुमारे १० मिनिटांत.

सुरू करण्यापूर्वी

तुम्हाला git, Node 22 किंवा नवीन, आणि pnpm 10 किंवा नवीन लागेल. कोणताही Angular 20 प्रकल्प चालेल — Angular CLI किंवा Analog.

पायरी १ — कोड मिळवा

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 बंडल तयार करते.

पायरी २ — तुमचा पहिला घटक

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() क्लास जोडण्यासाठी.

पायरी ३ — एक छोटा फॉर्म बनवा

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: फोकस प्रत्येक नियंत्रणातून जातो, लेबल जाहीर होते आणि सबमिट चालते. वर्तन पूर्ण आहे; देखावा तुमचा आहे आणि पुढची पायरी आहे.

पायरी ४ — त्याला शैली द्या

क्लास हुकना शैली द्या — .button, .text-input, .label, .field — यामध्ये styles.css, किंवा तयार थीम अॅरेमध्ये जोडा styles मध्ये angular.json / ते येथे लिंक करा index.html: 

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

पायरी ५ — सगळे चालताना पहा

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

पुढील पायऱ्या

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.