Pipes — Angular Technical Interview Questions & Answers

Pipes

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.

Technical Interview Tip: Built-in date pipe + one custom Pass/Fail.

Code Examples for Pipes

Pipes — working 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.

How to Explain Pipes to an Interviewer

What is a pipe?

Formats a value in the template

Give one built-in and one custom use.

date Fail/Pass transform