ডিরেক্টিভস

Web Development - অ্যাঙ্গুলার (Angular) - Angular এর স্থাপত্য

629

Angular ডিরেক্টিভস হলো এমন স্পেশাল ক্লাস যা DOM (Document Object Model)-এর আচরণ বা স্ট্রাকচার পরিবর্তন করে। ডিরেক্টিভস কম্পোনেন্টের চেহারা এবং আচরণ নিয়ন্ত্রণ করতে ব্যবহৃত হয়। Angular-এ তিন ধরনের ডিরেক্টিভস ব্যবহৃত হয়: Structural Directives, Attribute Directives, এবং Custom Directives।

1. Structural Directives

Structural Directives DOM-এর স্ট্রাকচার পরিবর্তন করে, যেমন কোন এলিমেন্টকে যোগ করা, মুছে ফেলা বা দেখানো। এই ধরনের ডিরেক্টিভ সাধারণত * চিহ্ন দিয়ে শুরু হয়।

ngIf

*ngIf ডিরেক্টিভটি একটি HTML এলিমেন্টকে শর্তসাপেক্ষে DOM-এ অন্তর্ভুক্ত বা অন্তর্ভুক্ত না করার জন্য ব্যবহৃত হয়।
উদাহরণ:
```
<div *ngIf="isVisible">This content is visible</div>
```
এখানে isVisible যদি true হয়, তাহলে এলিমেন্টটি DOM-এ দেখানো হবে; যদি false হয়, তাহলে তা লুকানো হবে।

ngFor

*ngFor ডিরেক্টিভটি একটি লিস্ট বা অ্যারে ডেটাকে DOM-এ রিপিট করতে ব্যবহৃত হয়।
উদাহরণ:
```
<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>
```
এখানে items হলো অ্যারে বা লিস্ট, এবং এটি *ngFor দিয়ে প্রতিটি আইটেমের জন্য একটি li এলিমেন্ট তৈরি করবে।

ngSwitch

*ngSwitch ডিরেক্টিভটি একাধিক শর্ত পরীক্ষা করার জন্য ব্যবহৃত হয় এবং নির্দিষ্ট শর্তের ভিত্তিতে ভিন্ন ভিন্ন HTML এলিমেন্ট দেখানোর জন্য ব্যবহৃত হয়।
উদাহরণ:
```
<div [ngSwitch]="value">
  <p *ngSwitchCase="'a'">A</p>
  <p *ngSwitchCase="'b'">B</p>
  <p *ngSwitchDefault>Default</p>
</div>
```
এখানে value-এর মানের উপর ভিত্তি করে ভিন্ন ভিন্ন প্যারাগ্রাফ দেখানো হবে।

2. Attribute Directives

Attribute Directives কোনো HTML এলিমেন্টের আচরণ বা স্টাইল পরিবর্তন করে। এই ডিরেক্টিভগুলি এলিমেন্টের আচরণকে নিয়ন্ত্রণ করে এবং সাধারাণত HTML ট্যাগের অ্যাট্রিবিউট হিসেবে ব্যবহৃত হয়।

ngClass

ngClass ডিরেক্টিভটি এলিমেন্টের ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহৃত হয়, যা এলিমেন্টের স্টাইল পরিবর্তন করে।
উদাহরণ:
```
<div [ngClass]="{ 'highlight': isHighlighted }">This is highlighted</div>
```
এখানে যদি isHighlighted true হয়, তাহলে highlight ক্লাসটি এই div এলিমেন্টে অ্যাড করা হবে, যা CSS এর মাধ্যমে স্টাইলিং করতে সাহায্য করবে।

ngStyle

ngStyle ডিরেক্টিভটি এলিমেন্টের ইনলাইন স্টাইল পরিবর্তন করতে ব্যবহৃত হয়।
উদাহরণ:
```
<div [ngStyle]="{ 'color': color, 'font-size': fontSize }">Styled text</div>
```
এখানে color এবং fontSize ডাইনামিকভাবে পরিবর্তিত স্টাইল নির্ধারণ করে।

ngModel

ngModel ডিরেক্টিভটি Two-Way Data Binding এর জন্য ব্যবহৃত হয়, যা UI এবং কম্পোনেন্টের ডেটা সিঙ্ক্রোনাইজ করে।
উদাহরণ:
```
<input [(ngModel)]="name">
```
এখানে name প্রোপার্টি ইনপুট ফিল্ডের মাধ্যমে দুই দিকেই (কম্পোনেন্ট থেকে UI এবং UI থেকে কম্পোনেন্টে) ডেটা সিঙ্ক্রোনাইজ করবে।

3. Custom Directives

Custom Directives তৈরি করে আপনি Angular-এ আপনার নিজস্ব ডিরেক্টিভ তৈরি করতে পারেন। এটি সাধারণত কোনো @Directive ডেকোরেটরের মাধ্যমে তৈরি করা হয়।

Custom Directive Example

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }
}

এই ডিরেক্টিভটি একটি appHighlight নামে HTML অ্যাট্রিবিউট হিসেবে ব্যবহৃত হবে এবং এটি যেকোনো এলিমেন্টের ব্যাকগ্রাউন্ড কালার হলুদে পরিবর্তন করবে।

টেম্পলেটে ব্যবহার:

<p appHighlight>This paragraph has a yellow background.</p>