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 અને કીબોર્ડ.

રસ્તામાં પ્રશ્નો છે? મદદ પૃષ્ઠ જવાબોથી ભરેલું છે — અને જો કોઈ પગલું વધુ સ્પષ્ટ થઈ શકે, અમને કહો અને અમે ખુશીથી ટ્યુટોરિયલ સુધારીશું.