Angular হলো একটি শক্তিশালী ফ্রেমওয়ার্ক যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য অনেক শক্তিশালী ফিচার প্রদান করে। এর মধ্যে Directives এবং Pipes দুটি অত্যন্ত গুরুত্বপূর্ণ ফিচার, যা UI কন্ট্রোল, ডেটা প্রদর্শন এবং লজিকাল পরিবর্তন করার জন্য ব্যবহৃত হয়।
১. Angular Directives
Angular এর Directives ব্যবহার করে HTML ট্যাগগুলোর behavior পরিবর্তন করা যায়। ডিরেকটিভগুলি কাস্টম লজিক অ্যাড করতে এবং DOM-এ পরিবর্তন করতে ব্যবহৃত হয়। Angular-এ তিন প্রকারের ডিরেকটিভ রয়েছে:
১.১ ১. Structural Directives
এগুলি HTML এর DOM-এ উপাদানগুলির structure পরিবর্তন করতে ব্যবহৃত হয় (যেমন: *ngIf, *ngFor ইত্যাদি)।
উদাহরণ:
- ngIf: কোন উপাদানকে শো বা হাইড করতে ব্যবহৃত হয়।
<div *ngIf="isVisible">This will be displayed if 'isVisible' is true.</div>
এখানে, *ngIf="isVisible" যখন isVisible এর মান true হয় তখন উপাদানটি প্রদর্শিত হবে, আর যখন false হবে তখন এটি লুকানো থাকবে।
- ngFor: লুপের মাধ্যমে এলিমেন্টগুলো প্রদর্শন করতে ব্যবহৃত হয়।
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
এখানে, *ngFor="let item of items" একটি লিস্টের মাধ্যমে আইটেমগুলো রেন্ডার করবে।
১.২ ২. Attribute Directives
এগুলি কোনো HTML উপাদানের আচরণ পরিবর্তন করতে ব্যবহৃত হয়, কিন্তু DOM স্ট্রাকচার পরিবর্তন করে না। কিছু পরিচিত অ্যাট্রিবিউট ডিরেকটিভ হলো ngClass, ngStyle ইত্যাদি।
উদাহরণ:
- ngClass: ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহৃত হয়।
<div [ngClass]="{'highlight': isHighlighted}">This div will have the 'highlight' class if 'isHighlighted' is true.</div>
এখানে, isHighlighted যদি true হয়, তাহলে highlight ক্লাস অ্যাপ্লাই হবে।
- ngStyle: স্টাইল প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়।
<div [ngStyle]="{ 'color': textColor, 'font-size': fontSize }">This text's style will change based on 'textColor' and 'fontSize' values.</div>
এখানে, textColor এবং fontSize ডাইনামিকভাবে স্টাইল প্রপার্টি পরিবর্তন করবে।
১.৩ ৩. Custom Directives
এটি কাস্টম ডিরেকটিভ তৈরি করার পদ্ধতি, যা আপনি নিজে লিখে DOM-এ বিশেষ ধরনের behavior অ্যাড করতে পারেন।
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 নামে একটি কাস্টম ডিরেকটিভ তৈরি করা হয়েছে যা কোনো উপাদানে ব্যাকগ্রাউন্ড রঙ yellow অ্যাড করবে।
২. Angular Pipes
Pipes হলো এমন একটি ফিচার যা ডেটা রূপান্তরের জন্য ব্যবহৃত হয়। এটি ডেটাকে ভ্যালুতে রূপান্তর করে এবং ডিসপ্লে করা হয়। Angular-এ ডিফল্ট অনেক পাইপস রয়েছে, যেমন DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe ইত্যাদি। এছাড়া, আপনি কাস্টম পাইপও তৈরি করতে পারেন।
২.১ ডিফল্ট Pipes ব্যবহার
- DatePipe: ডেটা প্রদর্শন করার জন্য ব্যবহৃত হয়।
<p>{{ currentDate | date:'short' }}</p>
এখানে, currentDate হলো বর্তমান তারিখ এবং সময়, যা short ফর্ম্যাটে প্রদর্শিত হবে।
- UpperCasePipe: টেক্সটকে বড় হাতের অক্ষরে রূপান্তরিত করে।
<p>{{ text | uppercase }}</p>
- CurrencyPipe: মুদ্রার আকারে ডেটা প্রদর্শন করে।
<p>{{ amount | currency:'USD' }}</p>
২.২ Custom Pipes
কাস্টম পাইপ তৈরি করতে হলে আপনাকে একটি Pipe ক্লাস তৈরি করতে হবে, এবং @Pipe ডেকোরেটরের সাহায্যে এটিকে ব্যবহারযোগ্য করতে হবে।
Custom Pipe Example:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'reverseString'
})
export class ReverseStringPipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}
এখানে, reverseString নামে একটি কাস্টম পাইপ তৈরি করা হয়েছে, যা একটি স্ট্রিং রিভার্স করবে।
HTML তে ব্যবহার:
<p>{{ 'hello' | reverseString }}</p>
এটি আউটপুট হিসেবে olleh দেখাবে।
সারাংশ
- Directives: Angular এর ডিরেকটিভগুলি DOM এর behavior পরিবর্তন করতে ব্যবহৃত হয়। এগুলির মধ্যে Structural Directives (যেমন
*ngIf,*ngFor) এবং Attribute Directives (যেমনngClass,ngStyle) প্রধান। - Pipes: Angular-এ পাইপস ডেটা রূপান্তরের জন্য ব্যবহৃত হয়। Angular ডিফল্ট অনেক পাইপ যেমন
DatePipe,CurrencyPipe,UpperCasePipeপ্রদান করে। আপনি কাস্টম পাইপ তৈরি করে ডেটা কাস্টম রূপান্তরও করতে পারেন।
এগুলো Angular এর সবচেয়ে মৌলিক ফিচার, যা ডেভেলপারদেরকে ইউজার ইন্টারফেস এবং ডেটা ম্যানিপুলেশন খুব সহজভাবে পরিচালনা করতে সাহায্য করে।
Read more
