آموزش انگولار جلسه ۱۲— ساخت و استفاده از Pipe‌ها در Angular -

در این جلسه یاد می‌گیریم چگونه داده‌ها را قبل از نمایش قالب‌بندی (format) کنیم.
Angular برای این کار از قابلیتی به نام Pipe استفاده می‌کند.

Pipe چیست؟

Pipe در Angular ابزاری است که داده‌ها را در قالب (Template) تغییر شکل می‌دهد تا به شکل دلخواه نمایش داده شوند.

مثل:

نمایش تاریخ با فرمت انسانی
حروف بزرگ یا کوچک کردن
تبدیل عدد یا ارز
فیلتر لیست‌ها

در اصل، Pipe همانند فیلتر در قالب عمل می‌کند.

نحوه استفاده از Pipeها

Pipeها در HTML Template با علامت | (vertical bar) استفاده می‌شوند.

مثلاً:

<p>{{ today | date }}</p>
<p>{{ title | uppercase }}</p>

Pipeهای Built-in در Angular

Angular خودش تعداد زیادی Pipe آماده دارد که همیشه در دسترس‌اند.

Pipe	توضیح	مثال
`date`	نمایش تاریخ با فرمت دلخواه	`{{ today \| date:'fullDate' }}`
`uppercase` / `lowercase`	تغییر حروف متن	`{{ name \| uppercase }}`
`currency`	نمایش عدد به صورت پول	`{{ price \| currency:'USD' }}`
`percent`	نمایش درصد	`{{ ratio \| percent:'1.0-2' }}`
`json`	نمایش آبجکت‌ها به صورت JSON	`{{ user \| json }}`
`slice`	برش بخشی از آرایه یا رشته	`{{ list \| slice:0:3 }}`

چند مثال ساده از استفاده

<p>تاریخ امروز: {{ today | date:'longDate' }}</p>
<p>{{ 'angular' | uppercase }}</p>
<p>قیمت: {{ 145000 | currency:'IRR' }}</p>
<p>درصد تخفیف: {{ 0.25 | percent }}</p>

Pipeهای زنجیره‌ای (Chained Pipes)

می‌توان چند Pipe را پشت سر هم استفاده کرد:

{{ name | lowercase | titlecase }}

Pipe با آرگومان‌ها

برخی Pipeها پارامتر می‌گیرند:

{{ price | currency:'EUR':'symbol':'1.2-2' }}
{{ birthday | date:'EEEE, d MMMM y' }}

ساخت Pipe سفارشی (Custom Pipe)

اگر Pipe مورد نیازت در سیستم وجود ندارد، می‌توانی یک Pipe سفارشی بسازی.

ایجاد Pipe با CLI

به‌سادگی دستور زیر را بزن:

ng generate pipe pipes/shorten

یا کوتاه‌تر:

ng g p pipes/shorten

Angular دو فایل می‌سازد:

shorten.pipe.ts
shorten.pipe.spec.ts

`shorten.pipe.ts`

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

@Pipe({
  name: 'shorten',
  standalone: true
})
export class ShortenPipe implements PipeTransform {
  transform(value: string, limit: number = 20): string {
    if (!value) return '';
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

استفاده از Pipe در کامپوننت

در Component باید Pipe سفارشی را import کنیم.

@Component({
  selector: 'app-product',
  standalone: true,
  templateUrl: './product.component.html',
  imports: [CommonModule, ShortenPipe]
})
export class ProductComponent {}

استفاده در Template

<p>{{ product.description | shorten:50 }}</p>

اگر description طولانی‌تر از ۵۰ کاراکتر باشد، بقیه با ... کوتاه می‌شود.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

آموزش جامع Angular 17 تا 21 | از مبتدی تا پیشرفته + پروژه‌محور

آموزش انگولار جلسه ۱۲— ساخت و استفاده از Pipe‌ها در Angular