mediumFrontend

What are pipes in Angular?

Q: What are pipes in Angular?

**Core concept.** Pipes transform a value **for display** in a template, using the | syntax: {{ price | currency }} , {{ date | date:'short' }} , {{ name | uppercase }} , {{ data$ | async }} . They're **pure** by default (re-run only when the input reference changes), can take parameters, and chain. You can write custom ones with @Pipe . value 1699.5 <rect c

310 views

Understand the problem

Explain pipes and pure vs impure.

pipes

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A custom pipe

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

@Pipe({ name: 'truncate', standalone: true })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.slice(0, limit) + '…' : value;
  }
}

// usage:  {{ longText | truncate:30 }}
// built-ins:  {{ price | currency:'USD' }}   {{ today | date:'short' }}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is an HTTP interceptor?

What is the difference between providing a service in root vs in a component?