Angular · Theory

Pipes

Theory

15/43

Pipes

A pipe formats a value in the template: {{ dob | date:'dd MMM y' }}, {{ name | uppercase }}. Pure pipes run only when the input reference changes. Don’t put heavy search filters in a pipe on a huge list every keystroke unless you know the cost.

Custom pipe: @Pipe({ name: 'fail' }) transform(m: number) { return m < 40 ? 'Fail' : 'Pass'; }. Use {{ marks | fail }}. Trap: impure pipe that hits the network.

Exam tip

Built-in date pipe + one custom Pass/Fail.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Pipes: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTemplate formatter. date / uppercase / custom.
RuleKeep transform pure and cheap.
TrapHTTP inside a pipe.
Exdob | date.

Angular · Theory

Pipes

← All stacks

Theory

15/43

Pipes

Custom pipe: @Pipe({ name: 'fail' }) transform(m: number) { return m < 40 ? 'Fail' : 'Pass'; }. Use {{ marks | fail }}. Trap: impure pipe that hits the network.

Exam tip

Built-in date pipe + one custom Pass/Fail.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

Pipes: toggle open. Say whether the panel is on screen after one click.

Short notes

DefTemplate formatter. date / uppercase / custom.
RuleKeep transform pure and cheap.
TrapHTTP inside a pipe.
Exdob | date.

Pipes

Example

Short notes

Questions

Pipes

Example

Short notes

Questions