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 ਅਤੇ ਕੀਬੋਰਡ।

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।