Pipes টেমপ্লেটে প্রদর্শনের জন্য সরাসরি ডেটা রূপান্তর করে, | অপারেটর ব্যবহার করে। এটি আপনাকে মূল ডেটা পরিবর্তন না করে বা কম্পোনেন্টে রূপান্তর লজিক না লিখে মান (তারিখ, মুদ্রা, টেক্সট) ফর্ম্যাট করতে দেয়।
{{ today | date:'longDate' }}
{{ price | currency:'USD' }}
{{ name | uppercase }}
{{ ratio | percent }}
{{ bigNumber | number:'1.2-2' }}
{{ data | json }}
বাম দিকের মান pipe এর মাধ্যমে পাস করা হয়; আর্গুমেন্ট একটি কলন অনুসরণ করে (date:'longDate')।
<p>{{ today | date:'fullDate' | uppercase }}</p> <!-- pipes apply left to right -->
<!-- subscribes to an Observable/Promise and auto-unsubscribes -->
<div>{{ user$ | async }}</div>
<li *ngFor="let item of items$ | async">{{ item.name }}</li>
async বিশেষভাবে গুরুত্বপূর্ণ: এটি Observable-এ সাবস্ক্রাইব করে (যেমন একটি HTTP ফলাফল), নির্গত মান রেন্ডার করে, এবং কম্পোনেন্ট ধ্বংস হলে স্বয়ংক্রিয়ভাবে আনসাবস্ক্রাইব করে — ম্যানুয়াল সাবস্ক্রিপশন ব্যবস্থাপনা ছাড়াই মেমরি লিক প্রতিরোধ করে।
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "truncate" })
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 20): string {
return value.length > limit ? value.slice(0, limit) + "…" : value;
}
}
// usage: {{ longText | truncate:50 }}
Pure (default): re-runs only when the input REFERENCE changes → efficient (cached)
Impure: re-runs on every change detection cycle → use sparingly (e.g. filtering)
বিশুদ্ধ pipes ক্যাশ করা হয় এবং শুধুমাত্র তাদের ইনপুট পরিবর্তন হলে পুনঃগণনা করা হয় — যা তাদের কার্যকর করে তোলে।
Pipes ডেটা ফর্ম্যাটিংকে ঘোষণামূলক রাখে এবং টেমপ্লেটে রাখে যেখানে এটি থাকা উচিত, কম্পোনেন্ট লজিক থেকে আলাদা — পুনঃব্যবহারযোগ্য, চেইনযোগ্য, এবং (যখন বিশুদ্ধ হয়) দক্ষ।
অন্তর্নির্মিত pipes সাধারণ ফর্ম্যাটিং কভার করে, কাস্টম pipes অ্যাপ-নির্দিষ্ট রূপান্তর পরিচালনা করে, এবং async pipe হল Observable ডেটা প্রদর্শনের জন্য অনুমোদিত, লিক-মুক্ত উপায় — একটি প্যাটার্ন যা আপনি Angular-এ ক্রমাগত ব্যবহার করবেন।