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-সামঞ্জস্যপূর্ণ।

২০২৬-০৮-২৯ তারিখে যাচাইকৃত: আগের একটি খসড়া আলাদা 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

পরবর্তী ধাপ

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।