Sign in
Skip to solution
mediumFrontend

What are pipes in Angular?

310 views
01

Understand the problem

Explain pipes and pure vs impure.

pipes
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Pipes transform values in templates ({{ date | date:'short' }}). Built-ins include date, currency, async. Pure pipes (default) recompute only when the input reference changes — efficient; impure pipes run on every change detection. You can build custom pipes with @Pipe.

Solution ready — 2 min read

Classified // press E to declassify

04

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' }}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 71 of 121 decoded in the Angular track. One more won't hurt.

Back to track