Directives, Pipes & Templates

Angular Pipes

A pipe transforms a value for display in a template, applied with the | character. Angular ships with pipes for dates, numbers, currency, percentages, JSON, casing and async values.

What is Pipes in Angular?

A pipe transforms a value for display in a template, applied with the | character. Angular ships with pipes for dates, numbers, currency, percentages, JSON, casing and async values.

Pipes example

Built-in pipes with parameters

HTML

{{ job.postedAt | date:'dd MMM yyyy' }}          <!-- 10 Aug 2026 -->
{{ job.stipend | currency:'INR':'symbol':'1.0-0' }} <!-- ₹15,000 -->
{{ match | percent:'1.0-1' }}                       <!-- 87.5% -->
{{ job.title | uppercase }}
{{ job.description | slice:0:120 }}…
{{ jobs$ | async }}
{{ debugObject | json }}

Key points to remember

Pipes are chainable: {{ value | slice:0:50 | uppercase }}.
Import CommonModule (or the specific pipe) in standalone components.
Parameters follow the pipe name, separated by colons.

Commonly used built-in pipes

Pipe	Purpose
date	format a Date or ISO string
currency	format money with a currency symbol
number / percent	decimal and percentage formatting
uppercase / lowercase / titlecase	change text case
slice	take part of a string or array
json	stringify a value while debugging
async	subscribe to an Observable or Promise and unwrap it
keyvalue	iterate an object with @for

Common mistakes with Pipes

Using the date pipe on an invalid date string, which throws at runtime.
Chaining an impure pipe inside a large list, which runs on every change detection cycle.

Angular Pipes— Interview Questions & FAQs

What is the async pipe used for?+

It subscribes to an Observable or Promise, renders the latest value, and unsubscribes automatically when the component is destroyed — which removes the most common memory-leak bug in Angular apps.