Angular-এ কম্পোনেন্ট হলো অ্যাপ্লিকেশনের মৌলিক বিল্ডিং ব্লক। প্রতিটি কম্পোনেন্টের জন্য একটি ডেকোরেটর ব্যবহার করা হয়, যা Angular-কে জানিয়ে দেয় যে এটি একটি কম্পোনেন্ট এবং এটি কীভাবে কাজ করবে। এই ডেকোরেটরের মাধ্যমে কম্পোনেন্টের মেটাডেটা (যেমন টেম্পলেট, স্টাইল, ক্লাস ইত্যাদি) সংজ্ঞায়িত করা হয়।

Angular-এ কম্পোনেন্ট তৈরি করতে @Component ডেকোরেটর ব্যবহার করা হয়। এটি Angular-কে নির্দেশ করে যে এই ক্লাসটি একটি কম্পোনেন্ট, এবং এটি কীভাবে HTML টেম্পলেট, CSS স্টাইল, এবং অন্যান্য কনফিগারেশন ব্যবহার করবে।

কম্পোনেন্ট ডেকোরেটর এর গঠন

@Component ডেকোরেটরের মধ্যে কয়েকটি গুরুত্বপূর্ণ কনফিগারেশন থাকতে পারে:

• selector: এটি কম্পোনেন্টের নাম যা HTML টেম্পলেটে ব্যবহার করা হয়।
• templateUrl: কম্পোনেন্টের HTML টেম্পলেট ফাইলের পাথ।
• template: কম্পোনেন্টের HTML টেম্পলেট, যা সরাসরি ডেকোরেটরের মধ্যে লেখা যেতে পারে।
• styleUrls: কম্পোনেন্টের জন্য এক বা একাধিক CSS ফাইলের পাথ।
• styles: CSS স্টাইল, যা সরাসরি ডেকোরেটরের মধ্যে লেখা যেতে পারে।

কম্পোনেন্ট ডেকোরেটরের উদাহরণ

এখানে একটি সাধারণ Angular কম্পোনেন্টের উদাহরণ দেওয়া হলো যেখানে @Component ডেকোরেটর ব্যবহার করা হয়েছে:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে:

• selector: 'app-root' - এই কম্পোনেন্টটি HTML ফাইলের মধ্যে <app-root></app-root> ট্যাগ হিসেবে ব্যবহার করা হবে।
• templateUrl: './app.component.html' - কম্পোনেন্টের HTML টেম্পলেটটি এই ফাইলে সংজ্ঞায়িত আছে।
• styleUrls: './app.component.css' - কম্পোনেন্টের CSS স্টাইল এই ফাইলে থাকবে।

অন্যান্য ডেকোরেটর প্রপার্টি

1. template

যদি আপনি HTML টেম্পলেটটি সরাসরি কম্পোনেন্টে লিখতে চান, তাহলে templateUrl এর পরিবর্তে template ব্যবহার করা হয়।

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ title }}</h1>
    <p>Welcome to the Angular world!</p>
  `,
  styles: [`
    h1 { color: blue; }
  `]
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে template ডিরেক্টলি HTML কোড ধারণ করে এবং styles ব্যবহার করে স্টাইল অ্যাপ্লাই করা হয়েছে।

2. styles

এই প্রপার্টি দিয়ে আপনি সরাসরি CSS স্টাইল লিখতে পারেন। এটি inline CSS হিসেবে কাজ করে।

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: [`
    h1 { color: red; }
    p { font-size: 18px; }
  `]
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে styles এর মাধ্যমে কম্পোনেন্টের CSS স্টাইল সরাসরি নির্দিষ্ট করা হয়েছে।

3. animations

এই প্রপার্টি ব্যবহার করে কম্পোনেন্টে এনিমেশন সংজ্ঞায়িত করা যায়। Angular এ animations ব্যবহার করে ইউআই উপাদানগুলোর মধ্যে এনিমেশন যোগ করা যায়।

import { trigger, transition, style, animate } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  animations: [
    trigger('fadeIn', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate('1s', style({ opacity: 1 }))
      ])
    ])
  ]
})
export class AppComponent {
  title = 'Angular Application';
}

এখানে, animations প্রপার্টি দিয়ে একটি fadeIn এনিমেশন নির্ধারণ করা হয়েছে, যা কম্পোনেন্টের উপাদানটি ঢোকানোর সময় এক সেকেন্ডের মধ্যে ফেড ইন হবে।

কম্পোনেন্ট ডেকোরেটরের অন্য বৈশিষ্ট্যসমূহ

1. providers

এই প্রপার্টি দিয়ে আপনি কম্পোনেন্টের জন্য সার্ভিস বা ডিপেন্ডেন্সি ইনজেকশন নির্ধারণ করতে পারেন।

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  providers: [UserService]
})
export class UserComponent {
  constructor(private userService: UserService) { }
}

এখানে, providers প্রপার্টি ব্যবহার করে UserService সার্ভিসকে ইনজেক্ট করা হয়েছে, যা শুধুমাত্র এই কম্পোনেন্টের মধ্যে ব্যবহৃত হবে।

2. changeDetection

এটি Angular কম্পোনেন্টের change detection স্ট্রাটেজি নির্ধারণ করতে ব্যবহৃত হয়। ডিফল্টভাবে, Angular কম্পোনেন্টে ChangeDetectionStrategy.Default ব্যবহৃত হয়, যা স্বয়ংক্রিয়ভাবে কম্পোনেন্টের পরিবর্তন অনুসরণ করে। তবে আপনি ChangeDetectionStrategy.OnPush ব্যবহার করে পরিবর্তন নির্দিষ্ট করতে পারেন, যাতে পরিবর্তন শুধুমাত্র ইনপুট প্রোপার্টি পরিবর্তিত হলে ঘটবে।

import { ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  title = 'Angular Application';
}

উপসংহার

কম্পোনেন্ট ডেকোরেটর Angular অ্যাপ্লিকেশনে কম্পোনেন্টের কার্যাবলী, স্টাইল, টেম্পলেট, এবং অন্যান্য গুরুত্বপূর্ণ কনফিগারেশন সংজ্ঞায়িত করার জন্য অত্যন্ত গুরুত্বপূর্ণ। এটি Angular এর মৌলিক স্ট্রাকচার এবং আর্কিটেকচার গঠনে সহায়ক ভূমিকা পালন করে এবং কোডকে আরো পরিষ্কার, মডুলার, এবং পুনঃব্যবহারযোগ্য করে তোলে।