پایپ ها (Pipes)

«پایپ (Pipe)» فرمترِ نمایش است. یعنی مقدار را فقط قشنگ تر نشان می دهد. بنابراین داده اصلی تغییر نمی کند. در «پایپ های انگولار» از نماد | استفاده می کنیم. مثل تاریخ، پول، درصد.

مبانی پایپ های انگولار

«Async Pipe» مشترکِ Observable را می گیرد و آخرین مقدار را نشان می دهد. سپس خودش آن سابسکرایب می کند. «Pure Pipe» فقط با تغییر رفرنس اجرا می شود. بنابراین آرایه را درجا mutate نکن.

{{ title | uppercase }}
{{ price | currency:'USD' }}
{{ today | date:'short' }}

مشاهده در ادیتور

نکته: برای پایپ های داخلی در کامپوننت های standalone، CommonModule را ایمپورت کن.

پایپ های پرکاربرد

رشته، عدد و تاریخ را با پایپ های داخلی فرمت کن. همچنین بسیاری از آن ها گزینه می گیرند. منطق کسب وکار را بیرون از پایپ نگه دار.

{{ title | uppercase }}
{{ price | currency:'USD' }}
{{ today | date:'mediumDate' }}
{{ percent | percent:'1.0-2' }}

مشاهده در ادیتور

نمونه کامل

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Pipes</h3>
    <p>{{ title | uppercase }}</p>
    <p>{{ price | currency:'USD' }}</p>
    <p>{{ today | date:'mediumDate' }}</p>
    <p>{{ percent | percent:'1.0-2' }}</p>
  `
})
export class App {
  title = 'Angular';
  price = 1234.5;
  today = new Date();
  percent = 0.3495;
}

bootstrapApplication(App);

مشاهده در ادیتور

Async Pipe برای جریان ها

Observable یعنی جریانِ داده. Async Pipe مشترک می شود و مقدار آخر را نشان می دهد. سپس مدیریت اشتراک و پاکسازی را خودکار انجام می دهد.

<ng-container *ngIf="users$ | async as users; else loading">
  <li *ngFor="let u of users">{{ u.name }}</li>
</ng-container>
<ng-template #loading>Loading...</ng-template>

مشاهده در ادیتور

نمونه کامل Async

import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { interval, of } from 'rxjs';
import { map, delay } from 'rxjs/operators';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>Async Pipe</h3>
    <p>Time: {{ time$ | async | date:'mediumTime' }}</p>
    <h4>Users (delayed)</h4>
    <ng-container *ngIf="users$ | async as users; else loading">
      <ul>
        <li *ngFor="let u of users">{{ u.name }}</li>
      </ul>
    </ng-container>
    <ng-template #loading>Loading...</ng-template>
  `
})
export class App {
  time$ = interval(1000).pipe(map(() => new Date()));
  users$ = of([{ name: 'Alice' }, { name: 'Bob' }, { name: 'Carol' }]).pipe(delay(1200));
}

bootstrapApplication(App);

مشاهده در ادیتور

پایپ سفارشی

با @Pipe یک فرمت کننده کوچک بساز. سپس آن را standalone کن و داخل imports استفاده کن. همچنین خالص نگه دار.

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

@Pipe({ name: 'titlecase2', standalone: true })
export class TitleCase2Pipe implements PipeTransform {
  transform(v: string): string {
    /* ...format... */
    return v;
  }
}

مشاهده در ادیتور

نمونه کامل پایپ سفارشی

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Pipe, PipeTransform } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Pipe({ name: 'titlecase2', standalone: true })
export class TitleCase2Pipe implements PipeTransform {
  transform(value: string): string {
    if (!value) {
      return '';
    }
    return value
      .split(/\s+/)
      .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
      .join(' ');
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule, TitleCase2Pipe],
  template: `
    <h3>Custom Pipe</h3>
    <label>
      Text: <input [(ngModel)]="text" placeholder="type here" />
    </label>
    <p>Original: {{ text }}</p>
    <p>TitleCase2: {{ text | titlecase2 }}</p>
  `
})
export class App {
  text = 'hello angular pipes';
}

bootstrapApplication(App);

مشاهده در ادیتور

هشدار: پایپ را سنگین نکن. سپس محاسبات حجیم را به سرویس ها منتقل کن.

گام های عملی سریع

1. CommonModule را برای پایپ های داخلی ایمپورت کن.
2. از | async برای Observable با پاکسازی خودکار استفاده کن.
3. برای سفارشی سازی، یک پایپ standalone بساز.

جمع بندی سریع

• پایپ فقط نمایش را تغییر می دهد.
• Async Pipe اشتراک و لغو را مدیریت می کند.
• Pure Pipe با تغییر رفرنس اجرا می شود.
• منطق سنگین را به سرویس بسپار.

ادامه مسیر: کلاینت HTTP و روتر. همچنین از «پایپ های انگولار» هنگام نمایش داده دریافتی استفاده کن.