Angular-এ পাইপস (Pipes) হলো এমন একটি ফিচার যা ডেটাকে একটি নির্দিষ্ট ফরম্যাটে রূপান্তরিত করার জন্য ব্যবহৃত হয়। সাধারণত, তারা টেম্পলেটের মধ্যে ডেটাকে প্রদর্শন করার সময় কাজ করে এবং ডেটাকে ফরম্যাটিং, ফিল্টারিং বা ট্রান্সফর্মিং করার জন্য ব্যবহৃত হয়।

পাইপস ব্যবহার করার মাধ্যমে আপনি ডেটার অবস্থান পরিবর্তন না করে শুধুমাত্র তা কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে পারেন। উদাহরণস্বরূপ, ডেটাকে তারিখ হিসেবে, মুদ্রা হিসেবে বা বড় অক্ষরে প্রদর্শন করা।

Angular পাইপস এর ধরন

Angular-এ বিভিন্ন বিল্ট-ইন পাইপস রয়েছে, যেগুলি খুবই উপকারী। এগুলোর মধ্যে কিছু সাধারণ পাইপস হল: DatePipe, CurrencyPipe, UpperCasePipe, LowerCasePipe, DecimalPipe, JsonPipe, PercentPipe, ইত্যাদি।

1. DatePipe

DatePipe ব্যবহার করে আপনি তারিখ এবং সময়কে নির্দিষ্ট ফরম্যাটে রূপান্তরিত করতে পারেন।

ব্যবহার:

<p>{{ today | date:'short' }}</p>

এখানে today যদি Date টাইপের কোনো ভ্যারিয়েবল হয়, তবে এটি date:'short' ফরম্যাটে প্রদর্শিত হবে।

উদাহরণ:

<p>{{ today | date:'fullDate' }}</p> <!-- 3 October 2024 -->

এখানে, fullDate ফরম্যাট তারিখের পূর্ণ আঙ্গিক দেখাবে।

2. CurrencyPipe

CurrencyPipe মুদ্রা রূপান্তর করতে ব্যবহৃত হয়। এটি সাধারণত টাকার পরিমাণ বা মুদ্রা ফরম্যাটে ডেটাকে প্রদর্শন করতে ব্যবহৃত হয়।

ব্যবহার:

<p>{{ amount | currency:'USD' }}</p>

এখানে amount হলো এমন একটি ভ্যারিয়েবল যা একটি সঠিক মান ধারণ করে, এবং currency:'USD' ফরম্যাটে এটি ডলারে রূপান্তরিত হবে।

উদাহরণ:

<p>{{ amount | currency:'INR':'symbol' }}</p> <!-- ₹5000.00 -->

এখানে, 'symbol' দ্বারা রূপান্তরিত পরিমাণে মুদ্রার সিম্বল প্রদর্শিত হবে।

3. UpperCasePipe এবং LowerCasePipe

UpperCasePipe এবং LowerCasePipe ব্যবহার করে আপনি একটি স্ট্রিংকে বড় অক্ষর বা ছোট অক্ষরে রূপান্তর করতে পারেন।

ব্যবহার:

<p>{{ text | uppercase }}</p> <!-- EXAMPLE TEXT -->
<p>{{ text | lowercase }}</p> <!-- example text -->

এখানে text ভ্যারিয়েবলটি একটি স্ট্রিং, এবং uppercase বা lowercase দ্বারা তা রূপান্তরিত হবে।

4. JsonPipe

JsonPipe ব্যবহার করে আপনি যেকোনো অবজেক্টকে JSON ফরম্যাটে রূপান্তর করতে পারেন, যা ডেভেলপারদের জন্য ডেটার সহজ প্রদর্শন করতে সাহায্য করে।

ব্যবহার:

<p>{{ data | json }}</p>

এখানে, data কোনো অবজেক্ট বা অ্যারে হতে পারে এবং json পাইপের মাধ্যমে এটি JSON ফরম্যাটে রূপান্তরিত হবে।

উদাহরণ:

<p>{{ user | json }}</p> 

এখানে, user একটি অবজেক্ট হলে এটি JSON আউটপুট হিসেবে প্রদর্শিত হবে।

5. DecimalPipe

DecimalPipe ব্যবহার করে আপনি দশমিক সংখ্যা ফরম্যাট করতে পারেন, এবং নির্দিষ্ট সংখ্যক দশমিক স্থানও নির্ধারণ করতে পারেন।

ব্যবহার:

<p>{{ value | number:'1.2-2' }}</p>

এখানে, '1.2-2' মানে হলো, অন্তত একটি ডিজিট এবং সর্বোচ্চ দুইটি দশমিক স্থান পর্যন্ত সংখ্যা প্রদর্শিত হবে।

6. PercentPipe

PercentPipe ব্যবহার করে আপনি সংখ্যাকে শতাংশ হিসেবে রূপান্তর করতে পারেন। এটি দশমিক সংখ্যাকে শতাংশের আকারে দেখায়।

ব্যবহার:

<p>{{ value | percent:'1.0-0' }}</p>

এখানে, value একটি সংখ্যা হতে হবে এবং এটি শতকরা রূপে রূপান্তরিত হবে।

উদাহরণ:

<p>{{ 0.15 | percent }}</p> <!-- 15% -->

এখানে, 0.15 শতাংশ রূপে 15% হিসেবে রূপান্তরিত হবে।

7. AsyncPipe

AsyncPipe পাইপটি এসিনক্রোনাস ডেটা, যেমন Observable বা Promise থেকে ডেটা সাবস্ক্রাইব করতে ব্যবহৃত হয় এবং রিয়েক্টিভ ডেটার পরিবর্তনগুলিকে টেম্পলেটে আপডেট করে।

ব্যবহার:

<p>{{ observableData | async }}</p>

এখানে, observableData একটি Observable বা Promise হতে হবে, এবং async পাইপটির মাধ্যমে এটি সাবস্ক্রাইব হবে এবং তার মান আপডেট হবে।

কাস্টম পাইপ তৈরি করা

Angular-এ কাস্টম পাইপ তৈরি করাও সম্ভব। এটি আপনার নির্দিষ্ট প্রয়োজনের জন্য একটি নতুন পাইপ তৈরি করতে সাহায্য করে।

কাস্টম পাইপ উদাহরণ:

ng generate pipe custom

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'custom'
})
export class CustomPipe implements PipeTransform {

  transform(value: string, args: string): string {
    return value.toUpperCase() + ' ' + args;
  }

}

এখানে, CustomPipe একটি কাস্টম পাইপ যা স্ট্রিংয়ের প্রথম অংশটিকে বড় অক্ষরে রূপান্তরিত করবে এবং পরে একটি আর্গুমেন্ট যোগ করবে।

ব্যবহারের উদাহরণ:

<p>{{ 'hello' | custom:'World' }}</p> <!-- HELLO World -->

সারাংশ

Angular পাইপস অত্যন্ত শক্তিশালী টুল, যা ডেটাকে ফরম্যাট, রূপান্তর বা প্রক্রিয়া করতে সাহায্য করে। Angular এর বিল্ট-ইন পাইপস ব্যবহার করে সাধারণ ডেটা ট্রান্সফরমেশন খুবই সহজ, তবে যদি আপনার কাস্টম প্রক্রিয়ার প্রয়োজন হয় তবে কাস্টম পাইপ তৈরি করেও এটি করা যায়।

Angular পাইপ হল একটি বিশেষ ফিচার যা ডেটাকে টেমপ্লেটের মধ্যে ডিসপ্লে করার আগে কনভার্ট বা ফরম্যাট করার জন্য ব্যবহৃত হয়। এটি ডেটা ট্রান্সফরমেশনের কাজ সহজভাবে করার জন্য ডিজাইন করা হয়েছে। সাধারণত একটি কম্পোনেন্টের ডেটা ফরম্যাট বা প্রদর্শন করতে পাইপ ব্যবহার করা হয়, যেমন তারিখ, সংখ্যা, স্ট্রিং বা অন্যান্য টাইপ কাস্টমাইজ করা।

Angular পাইপ মূলত ডেটা প্রদর্শনের সময় বিভিন্ন ফরম্যাটিং এবং ট্রান্সফরমেশন অ্যাপ্লাই করার জন্য ব্যবহৃত হয়, যাতে UI তে আরও পরিষ্কার ও উপযুক্ত ডেটা প্রদর্শিত হয়।

পাইপের ব্যবহার

পাইপ সাধারণত Angular টেমপ্লেটে ব্যবহৃত হয় এবং এটি | (pipe) চিহ্নের মাধ্যমে অ্যাপ্লাই করা হয়। এটি একটি ফাংশনালিটি হিসেবে কাজ করে যা ইনপুট ডেটার উপর কোনো নির্দিষ্ট ফরম্যাটিং বা কনভার্সন করে আউটপুট প্রদান করে।

উদাহরণস্বরূপ, আপনি যদি একটি তারিখ প্রদর্শন করতে চান, তবে তারিখটি একটি নির্দিষ্ট ফরম্যাটে দেখানোর জন্য পাইপ ব্যবহার করতে পারেন।

<p>{{ currentDate | date:'short' }}</p>

এখানে, date পাইপটি currentDate ভ্যালুকে একটি নির্দিষ্ট ফরম্যাটে রেন্ডার করবে।

Angular পাইপের ধরন

Angular-এ বিভিন্ন ধরনের বিল্ট-ইন পাইপ রয়েছে যা সাধারণত ব্যবহৃত হয়:

1. date Pipe

• date পাইপটি তারিখ এবং সময়কে একটি নির্দিষ্ট ফরম্যাটে রেন্ডার করতে ব্যবহৃত হয়।

  উদাহরণ:

  <p>{{ currentDate | date:'yyyy/MM/dd' }}</p>
  

  এখানে, currentDate একটি তারিখ এবং এটি yyyy/MM/dd ফরম্যাটে প্রদর্শিত হবে।

2. currency Pipe

• currency পাইপটি সংখ্যা বা অর্থকে একটি নির্দিষ্ট মুদ্রার ফরম্যাটে কনভার্ট করতে ব্যবহৃত হয়।

  উদাহরণ:

  <p>{{ amount | currency:'USD' }}</p>
  

  এখানে, amount ভ্যালুটিকে USD (ডলার) মুদ্রায় কনভার্ট করা হবে।

3. percent Pipe

• percent পাইপটি সংখ্যাকে শতাংশ ফরম্যাটে কনভার্ট করে।

  উদাহরণ:

  <p>{{ 0.25 | percent }}</p>
  

  এটি ২৫% হিসেবে প্রদর্শিত হবে।

4. uppercase / lowercase Pipe

• uppercase এবং lowercase পাইপগুলি স্ট্রিংয়ের কেস পরিবর্তন করতে ব্যবহৃত হয়।

  উদাহরণ:

  <p>{{ 'hello world' | uppercase }}</p> <!-- OUTPUT: HELLO WORLD -->
  <p>{{ 'HELLO WORLD' | lowercase }}</p> <!-- OUTPUT: hello world -->
  

5. json Pipe

• json পাইপটি অবজেক্ট বা অ্যারে ডেটাকে JSON স্ট্রিংয়ের আকারে কনভার্ট করে।

  উদাহরণ:

  <p>{{ user | json }}</p>
  

  এখানে, user নামক অবজেক্টটি JSON ফরম্যাটে রেন্ডার হবে।

6. slice Pipe

• slice পাইপটি একটি স্ট্রিং বা অ্যারে থেকে নির্দিষ্ট অংশ কেটে প্রদর্শন করতে ব্যবহৃত হয়।

  উদাহরণ:

  <p>{{ 'Angular is great' | slice:0:7 }}</p> <!-- OUTPUT: Angular -->
  

কাস্টম পাইপ তৈরি করা

যদি আপনি কোনো বিশেষ ধরনের ডেটা ট্রান্সফরমেশন করতে চান যা Angular-এর বিল্ট-ইন পাইপ দিয়ে সম্ভব না হয়, তবে আপনি নিজস্ব কাস্টম পাইপ তৈরি করতে পারেন।

কাস্টম পাইপ তৈরি করতে @Pipe ডেকোরেটর এবং transform মেথড ব্যবহার করতে হয়।

কাস্টম পাইপ উদাহরণ

ধরা যাক, আমরা একটি কাস্টম পাইপ তৈরি করতে চাই যেটি একটি স্ট্রিংয়ের মধ্যে থাকা সব শব্দের প্রথম অক্ষর বড় করে দিবে:

1. প্রথমে, কাস্টম পাইপ তৈরি করি:

   ng generate pipe capitalize
   

2. এরপরে, পাইপের কোড লিখি:

   import { Pipe, PipeTransform } from '@angular/core';
   
   @Pipe({
     name: 'capitalize'
   })
   export class CapitalizePipe implements PipeTransform {
   
     transform(value: string): string {
       if (!value) return value;
       return value.replace(/\b\w/g, char => char.toUpperCase());
     }
   }
   

3. তারপর এই পাইপটি টেমপ্লেটে ব্যবহার করি:

   <p>{{ 'hello angular world' | capitalize }}</p> <!-- OUTPUT: Hello Angular World -->
   

এখানে, capitalize পাইপটি সব শব্দের প্রথম অক্ষরকে বড় করে প্রদর্শন করবে।

সারাংশ

Angular পাইপ হল একটি শক্তিশালী ফিচার যা ডেটা প্রদর্শন বা রেন্ডার করার সময় ফরম্যাটিং এবং ট্রান্সফরমেশন করতে ব্যবহৃত হয়। বিল্ট-ইন পাইপ যেমন date, currency, percent, uppercase ইত্যাদি খুবই জনপ্রিয়, আর প্রয়োজনে কাস্টম পাইপ তৈরি করাও সম্ভব, যা বিশেষ ধরনের ডেটা প্রক্রিয়াকরণের জন্য ব্যবহৃত হয়।

Angular-এ পাইপস হলো একটি ফিচার, যা ডেটা ট্রান্সফর্ম বা ফরম্যাট করতে ব্যবহৃত হয়। পাইপস ব্যবহার করে আপনি ডেটার উপস্থাপন পরিবর্তন করতে পারেন, যেমন তারিখ, সংখ্যা, বা টেক্সট ফরম্যাট। Angular-এ অনেক বিল্ট-ইন পাইপস রয়েছে যা সহজেই ডেটা ফরম্যাটিং বা পরিবর্তন করতে সাহায্য করে।

বিল্ট-ইন পাইপস

1. DatePipe

DatePipe ব্যবহার করে আপনি একটি তারিখের ফরম্যাট পরিবর্তন করতে পারেন। এটি Date অবজেক্টকে একটি নির্দিষ্ট ফরম্যাটে কনভার্ট করে।

উদাহরণ:

<p>{{ currentDate | date }}</p> <!-- Default format -->
<p>{{ currentDate | date:'short' }}</p> <!-- Short date format -->
<p>{{ currentDate | date:'yyyy-MM-dd' }}</p> <!-- Custom date format -->

এখানে, currentDate হলো একটি JavaScript Date Object, এবং date পাইপ দিয়ে আপনি তারিখের প্রদর্শন কাস্টমাইজ করতে পারেন। আপনি বিভিন্ন ফরম্যাট ব্যবহার করতে পারেন, যেমন:

• 'short', 'medium', 'long'
• 'yyyy-MM-dd', 'MM/dd/yyyy'

2. UpperCasePipe

UpperCasePipe ব্যবহার করে আপনি টেক্সটের সমস্ত অক্ষরকে বড় হাতের (uppercase) অক্ষরে পরিবর্তন করতে পারেন।

উদাহরণ:

<p>{{ 'hello world' | uppercase }}</p>

এখানে "hello world" টেক্সটটি UpperCasePipe দ্বারা 'HELLO WORLD' এ রূপান্তরিত হবে।

3. LowerCasePipe

LowerCasePipe ব্যবহার করে আপনি টেক্সটের সমস্ত অক্ষরকে ছোট হাতের (lowercase) অক্ষরে পরিবর্তন করতে পারেন।

উদাহরণ:

<p>{{ 'HELLO WORLD' | lowercase }}</p>

এখানে "HELLO WORLD" টেক্সটটি LowerCasePipe দ্বারা 'hello world' এ রূপান্তরিত হবে।

4. CurrencyPipe

CurrencyPipe ব্যবহার করে আপনি একটি সংখ্যাকে কারেন্সি (মুদ্রা) ফরম্যাটে রূপান্তর করতে পারেন। এটি সাধারণত টাকা বা মূল্য প্রদর্শনের জন্য ব্যবহৃত হয়।

উদাহরণ:

<p>{{ 1234.56 | currency }}</p>
<p>{{ 1234.56 | currency:'EUR' }}</p> <!-- Euro currency -->

এখানে প্রথম উদাহরণে ডিফল্ট মুদ্রা ব্যবহার হবে (যেমন: USD), এবং দ্বিতীয় উদাহরণে ইউরো (EUR) মুদ্রা হিসেবে রূপান্তরিত হবে।

5. DecimalPipe

DecimalPipe ব্যবহার করে আপনি একটি দশমিক সংখ্যাকে নির্দিষ্ট দশমিক স্থানে রূপান্তর করতে পারেন।

উদাহরণ:

<p>{{ 1234.5678 | number:'1.2-2' }}</p>

এখানে, 1.2-2 মানে হচ্ছে সংখ্যাটির অন্তত একটি ডিজিট থাকবে এবং দুটি দশমিক স্থান পর্যন্ত রূপান্তরিত হবে। এই কনফিগারেশনে 1234.5678 → 1,234.57 রূপে প্রদর্শিত হবে।

6. PercentPipe

PercentPipe ব্যবহার করে আপনি একটি দশমিক সংখ্যাকে শতাংশের (percentage) ফরম্যাটে রূপান্তর করতে পারেন।

উদাহরণ:

<p>{{ 0.25 | percent }}</p>

এখানে 0.25 সংখ্যাটি ২৫% হিসেবে রূপান্তরিত হবে এবং এটি '25%' হিসাবে প্রদর্শিত হবে।

7. JsonPipe

JsonPipe ব্যবহার করে আপনি একটি অবজেক্টকে JSON স্ট্রিং হিসেবে রূপান্তর করতে পারেন। এটি ডিবাগিং বা লগিংয়ের জন্য খুবই উপকারী।

উদাহরণ:

<p>{{ { name: 'John', age: 30 } | json }}</p>

এখানে, { name: 'John', age: 30 } অবজেক্টটি JSON স্ট্রিং হিসেবে রূপান্তরিত হয়ে প্রদর্শিত হবে।

8. SlicePipe

SlicePipe ব্যবহার করে আপনি একটি অ্যারে বা স্ট্রিং থেকে একটি নির্দিষ্ট অংশ কেটে নিতে পারেন।

উদাহরণ:

<p>{{ 'Angular is awesome' | slice:0:7 }}</p>

এখানে, slice:0:7 নির্দেশ করছে যে "Angular is awesome" স্ট্রিংয়ের প্রথম ৭টি অক্ষর (যেমন: 'Angular') প্রদর্শিত হবে।

9. AsyncPipe

AsyncPipe ব্যবহার করে আপনি আসিঙ্ক্রোনাস ডেটাকে অ্যাঞ্জুলারের টেম্পলেটে সাবস্ক্রাইব করতে পারেন। এটি সাধারণত Observable বা Promise ডেটা হ্যান্ডল করতে ব্যবহৃত হয়।

উদাহরণ:

<p>{{ observableData | async }}</p>

এখানে observableData একটি Observable এবং AsyncPipe এর মাধ্যমে এটি সাবস্ক্রাইব করা হচ্ছে। এটি ডেটার পরিবর্তন হলে টেম্পলেটে স্বয়ংক্রিয়ভাবে আপডেট হবে।

পাইপসের ব্যবহারের সুবিধা

• সহজ ডেটা ফরম্যাটিং: পাইপস আপনাকে সহজভাবে ডেটা ফরম্যাট করতে সাহায্য করে, যেমন তারিখ, সংখ্যা বা টেক্সট।
• কাস্টমাইজেবল: Angular-এ বিল্ট-ইন পাইপস ছাড়াও আপনি আপনার নিজের কাস্টম পাইপ তৈরি করতে পারেন।
• প্রদর্শন ইন্ডিপেনডেন্ট: পাইপসের মাধ্যমে আপনি কম্পোনেন্টের ডেটা প্রদর্শন পরিবর্তন করতে পারেন, যা UI এবং ডেটা ম্যানিপুলেশনকে আলাদা করে রাখে।

কাস্টম পাইপ তৈরি

আপনি Angular-এ কাস্টম পাইপও তৈরি করতে পারেন, যা আপনার প্রয়োজন অনুযায়ী ডেটা ট্রান্সফর্ম করবে।

কাস্টম পাইপ উদাহরণ:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'reverseString'
})
export class ReverseStringPipe implements PipeTransform {
  transform(value: string): string {
    return value.split('').reverse().join('');
  }
}

এখানে reverseString পাইপটি স্ট্রিংটিকে উল্টো করে রূপান্তর করবে। এর পর আপনি এটি টেম্পলেটে ব্যবহার করতে পারেন:

<p>{{ 'hello' | reverseString }}</p> <!-- Output: 'olleh' -->

উপসংহার

Angular এর বিল্ট-ইন পাইপস ব্যবহার করে আপনি সহজেই ডেটা ফরম্যাটিং, ট্রান্সফর্ম এবং প্রদর্শন পরিবর্তন করতে পারেন। DatePipe, UpperCasePipe, CurrencyPipe ইত্যাদি পাইপস টেম্পলেটের মধ্যে ডেটা সহজে এবং কাস্টম ফরম্যাটে প্রদর্শন করতে সাহায্য করে। এছাড়াও, কাস্টম পাইপ তৈরি করে আপনি আপনার অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ডেটা ট্রান্সফর্মেশন কাস্টমাইজ করতে পারেন।

Angular-এ পাইপস ব্যবহার করে ডেটা টেম্পলেটের মধ্যে রূপান্তর বা ফরম্যাট করা যায়। উদাহরণস্বরূপ, আপনি ডেটাকে একটি নির্দিষ্ট ফরম্যাটে (যেমন তারিখ, মুদ্রা বা বড় হাতের অক্ষর) প্রদর্শন করতে চাইলে Angular এর বিল্ট-ইন পাইপগুলো ব্যবহার করতে পারেন। তবে, যদি আপনার প্রয়োজন হয় এমন কোনো কাস্টম রূপান্তর, তাহলে আপনি নিজেই একটি কাস্টম পাইপ তৈরি করতে পারেন।

কাস্টম পাইপগুলি ব্যবহারকারীর প্রয়োজন অনুযায়ী ডেটা রূপান্তরের জন্য খুবই উপকারী, যেমন নামের প্রথম অক্ষর বড় করা, নির্দিষ্ট ভাষায় টেক্সট কনভার্ট করা, ফিল্টারিং ইত্যাদি।

কাস্টম পাইপ তৈরি করার ধাপ

1. পাইপ ক্লাস তৈরি করুন: কাস্টম পাইপ তৈরি করতে Angular CLI ব্যবহার করা যায়। এটি কমান্ডে টাইপ করে তৈরি করা সম্ভব:

   ng generate pipe pipe-name
   

   উদাহরণস্বরূপ, একটি capitalize পাইপ তৈরি করতে:

   ng generate pipe capitalize
   

   এই কমান্ডটি capitalize.pipe.ts নামে একটি পাইপ ক্লাস তৈরি করবে।

2. পাইপ ক্লাসে লজিক যোগ করুন: তারপর সেই পাইপ ক্লাসের মধ্যে ডেটা রূপান্তরের লজিক লিখতে হবে।

কাস্টম পাইপের উদাহরণ

ধরা যাক, আপনি একটি কাস্টম পাইপ তৈরি করতে চান যেটি একটি স্ট্রিংয়ের প্রথম অক্ষর বড় করবে (capitalize first letter):

capitalize.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'capitalize'
})
export class CapitalizePipe implements PipeTransform {

  transform(value: string): string {
    if (!value) {
      return value;
    }
    return value.charAt(0).toUpperCase() + value.slice(1);
  }

}

এখানে:

• @Pipe ডেকোরেটর পাইপটির নাম নির্ধারণ করে, যা টেম্পলেটের মধ্যে ব্যবহৃত হবে (এখানে capitalize)।
• transform মেথডে পাইপের কার্যকরী লজিক থাকে। এখানে, এটি প্রথম অক্ষরকে বড় করতে কাজ করে।

কাস্টম পাইপ ব্যবহার

একবার কাস্টম পাইপ তৈরি হয়ে গেলে, আপনি এটি Angular টেম্পলেটে ব্যবহার করতে পারেন।

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

<p>{{ 'hello world' | capitalize }}</p>

এখানে, hello world স্ট্রিংটি কাস্টম capitalize পাইপ ব্যবহার করে প্রথম অক্ষর বড় হয়ে Hello world হিসাবে রেন্ডার হবে।

কাস্টম পাইপের উন্নত ব্যবহার

কাস্টম পাইপগুলি আরও জটিল লজিকও পরিচালনা করতে পারে, যেমন সংখ্যা ফরম্যাটিং, মুদ্রার রূপান্তর, বা ডেটা ফিল্টারিং। নিচে একটি উন্নত পাইপের উদাহরণ দেওয়া হলো, যা একটি নির্দিষ্ট মুদ্রায় একটি সংখ্যা রূপান্তর করবে।

currency-format.pipe.ts:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'currencyFormat'
})
export class CurrencyFormatPipe implements PipeTransform {

  transform(value: number, currencySymbol: string = '$'): string {
    if (value == null) {
      return '';
    }
    return `${currencySymbol}${value.toFixed(2)}`;
  }

}

এখানে, এই পাইপটি একটি সংখ্যা রূপান্তর করবে এবং একটি মুদ্রার সিম্বল যোগ করবে। আপনি প্রয়োজন অনুযায়ী মুদ্রার সিম্বল পরিবর্তন করতে পারেন।

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

<p>{{ 1234.567 | currencyFormat:'€' }}</p>

এখানে, সংখ্যা 1234.567 মুদ্রার সিম্বল € যোগ করে রূপান্তরিত হবে এবং €1234.57 প্রদর্শিত হবে (দ্বিতীয় দশমিকের পর দুটি সংখ্যা দেখানো হবে)।

পাইপের পারফরমেন্স

Angular পাইপগুলি সাধারণত Pure Pipes হিসেবে কাজ করে, যার মানে হলো তারা শুধুমাত্র ইনপুট পরিবর্তিত হলে ট্রান্সফর্মেশন করে। এর ফলে, একই ইনপুট বারবার ট্রান্সফর্ম করলে পাইপটি পুনরায় রেন্ডার হবে না।

যদি আপনি কোনো পাইপের মধ্যে এমন কিছু লজিক ব্যবহার করেন যেটি ইনপুটের পরিবর্তন ছাড়া ট্রিগার হবে, তখন সেগুলো Impure Pipe হিসেবে ব্যবহৃত হতে পারে। তবে impure pipes পারফরমেন্সে কিছুটা প্রভাব ফেলতে পারে, তাই এটি ব্যবহার করার সময় সতর্কতা অবলম্বন করা উচিত।

সারাংশ

কাস্টম পাইপ Angular অ্যাপ্লিকেশনে ডেটার রূপান্তর করার শক্তিশালী উপায়। এটি সহজে ইউজার ইন্টারফেসে ডেটাকে রূপান্তর করতে এবং কাস্টম ফরম্যাটে দেখাতে সাহায্য করে। Angular CLI দিয়ে দ্রুত কাস্টম পাইপ তৈরি করা সম্ভব, এবং তা টেম্পলেটে ব্যবহার করা সহজ।

Angular-এ অ্যাসিঙ্ক পাইপ (Async Pipe) হলো একটি বিশেষ পাইপ যা Observables বা Promises এর মানকে অ্যাসিঙ্ক্রোনাসভাবে হ্যান্ডল করতে ব্যবহৃত হয়। এটি একটি অদ্ভুত ও শক্তিশালী টুল যা ডেটাকে অ্যাসিঙ্ক্রোনাসভাবে সাবস্ক্রাইব করে এবং ডেটা পরিবর্তিত হলে তা স্বয়ংক্রিয়ভাবে কম্পোনেন্টের ভিউতে রেন্ডার করে। সাধারণত, অ্যাসিঙ্ক পাইপ ব্যবহৃত হয় যখন ডেটা ফেচিং বা অ্যাসিঙ্ক্রোনাস অপারেশন যেমন HTTP কল বা টাইমার থেকে আসছে।

অ্যাসিঙ্ক পাইপের সুবিধা

• অ্যাক্সিস এবং সাবস্ক্রিপশন হ্যান্ডলিং: অ্যাসিঙ্ক পাইপ ব্যবহার করার মাধ্যমে আপনি সরাসরি টেমপ্লেটে Observables বা Promises এর মান অ্যাক্সেস করতে পারেন, এবং Angular নিজে এটি সাবস্ক্রাইব করে থাকে, ফলে আপনাকে ম্যানুয়ালি সাবস্ক্রিপশন করতে বা আনসাবস্ক্রাইব করার প্রয়োজন পড়ে না।
• এলিমেন্ট আপডেট: যখন Observable বা Promise-এ কোনো পরিবর্তন আসে, Angular স্বয়ংক্রিয়ভাবে ভিউ আপডেট করে।
• ডেটা ম্যানেজমেন্ট সহজ: অ্যাসিঙ্ক পাইপ ব্যবহারে অ্যাসিঙ্ক্রোনাস ডেটার ম্যানেজমেন্ট অনেক সহজ হয়ে যায়।

অ্যাসিঙ্ক পাইপ ব্যবহারের উদাহরণ

ধরা যাক, একটি অ্যাসিঙ্ক্রোনাস HTTP রিকোয়েস্ট রয়েছে যা কিছু ডেটা ফেচ করে, এবং সেই ডেটা Angular টেমপ্লেটে দেখাতে চান।

1. HTTP রিকোয়েস্ট থেকে Observable ব্যবহার

কম্পোনেন্ট (TypeScript):

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  users$: Observable<any>;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.users$ = this.http.get<any>('https://jsonplaceholder.typicode.com/users');
  }
}

এখানে, users$ একটি Observable যা HTTP কলের মাধ্যমে ব্যবহারকারীদের ডেটা ফেচ করবে।

2. অ্যাসিঙ্ক পাইপ ব্যবহার করে টেমপ্লেটে ডেটা প্রদর্শন

টেমপ্লেট (HTML):

<ul>
  <li *ngFor="let user of users$ | async">
    {{ user.name }}
  </li>
</ul>

এখানে, users$ একটি Observable যা async পাইপ দ্বারা সাবস্ক্রাইব করা হচ্ছে। যখনই users$-এর মান পরিবর্তিত হবে (যেমন HTTP কলের রেসপন্স আসবে), Angular স্বয়ংক্রিয়ভাবে DOM-এ পরিবর্তনগুলি রেন্ডার করবে। আপনি ম্যানুয়ালি .subscribe() বা .unsubscribe() করার প্রয়োজন পড়বে না।

অ্যাসিঙ্ক পাইপ এবং Promises

অ্যাসিঙ্ক পাইপ শুধুমাত্র Observables-এ কাজ করে না, এটি Promises থেকেও ডেটা সাবস্ক্রাইব করে। এটি তখন ব্যবহৃত হতে পারে যখন আপনি কোনো অ্যাসিঙ্ক্রোনাস অপারেশন (যেমন একটি HTTP কল যা Promise রিটার্ন করে) থেকে ডেটা পেতে চান।

উদাহরণ:

কম্পোনেন্ট (TypeScript):

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
  userPromise: Promise<any>;

  ngOnInit() {
    this.userPromise = this.fetchUser();
  }

  fetchUser(): Promise<any> {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ name: 'John Doe', age: 30 });
      }, 2000);
    });
  }
}

টেমপ্লেট (HTML):

<div *ngIf="userPromise | async as user; else loading">
  <p>Name: {{ user.name }}</p>
  <p>Age: {{ user.age }}</p>
</div>
<ng-template #loading>
  <p>Loading...</p>
</ng-template>

এখানে, userPromise একটি Promise, এবং async পাইপের মাধ্যমে এটি সাবস্ক্রাইব করা হচ্ছে। যেহেতু Promise টা অ্যাসিঙ্ক্রোনাস, তাই Angular নিজে এটি অ্যাসিঙ্ক্রোনাসভাবে রেন্ডার করবে এবং রেসপন্স আসলে user ডেটা টেমপ্লেটে দেখাবে।

অ্যাসিঙ্ক পাইপের সুবিধা ও ব্যবহার

1. রিটার্ন অ্যাসিঙ্ক্রোনাস ডেটা: আপনি যদি কোনো HTTP কল, WebSocket বা অন্য কোনো অ্যাসিঙ্ক্রোনাস ডেটা ফেচ করেন, তাহলে অ্যাসিঙ্ক পাইপ খুবই কার্যকর।
2. অটোমেটিক সাবস্ক্রিপশন এবং আনসাবস্ক্রিপশন: অ্যাসিঙ্ক পাইপ নিজে সাবস্ক্রিপশন ম্যানেজ করে, তাই আপনাকে ম্যানুয়ালি .subscribe() এবং .unsubscribe() করার প্রয়োজন নেই।
3. ভিউ আপডেট: যখন Observable বা Promise এর মান পরিবর্তিত হয়, Angular স্বয়ংক্রিয়ভাবে ভিউ আপডেট করে।

সারাংশ

অ্যাসিঙ্ক পাইপ Angular অ্যাপ্লিকেশনের জন্য একটি অত্যন্ত কার্যকর টুল, যা অ্যাসিঙ্ক্রোনাস ডেটার সাবস্ক্রিপশন এবং রেন্ডারিং প্রক্রিয়া সহজ করে দেয়। এটি কম্পোনেন্টের ভিউতে অ্যাসিঙ্ক্রোনাস ডেটা নিরাপদে এবং দক্ষতার সাথে প্রদর্শন করতে সহায়তা করে, এবং Angular নিজেই সাবস্ক্রিপশন এবং আনসাবস্ক্রিপশন হ্যান্ডল করে, ফলে কোড পরিষ্কার এবং মেইন্টেনেবল হয়।