How do pipes transform data dynamically in Angular

Question

Can you help me with a code example of how pipes transform data dynamically in Angular?

Answer 1

Pipes are used to transform data dynamically within templates. They take input data, apply a transformation, and return the transformed data for display. Pipes are invoked using the | symbol in template expressions.

Example:

<!-- Built-in Pipe -->

<p>{{ 'angular' | uppercase }}</p> <!-- Output: ANGULAR -->

<!-- Custom Pipe -->

<p>{{ 10 | multiplier:2 }}</p> <!-- Output: 20 -->

Custom Pipe Implementation:

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

@Pipe({ name: 'multiplier' })

export class MultiplierPipe implements PipeTransform {

  transform(value: number, factor: number): number {

    return value * factor;

  }

}