How do you apply transform functions in PipeTransform Interface

Question

i want know with the help of an exmaple that How do you apply transform functions in PipeTransform Interface?

Answer 1

In Angular, the PipeTransform interface is used to create custom pipes. To apply transform functions, you implement the transform method defined in the PipeTransform interface.

Steps:

Create a class and implement the PipeTransform interface.

Define the transform method, which takes an input value and optional parameters, and returns the transformed value.

Use the @Pipe decorator to define the pipe's name.

Example:

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

@Pipe({

  name: 'customPipe'

})

export class CustomPipe implements PipeTransform {

  transform(value: string, prefix: string = 'Default'): string {

    return `${prefix}: ${value.toUpperCase()}`;

  }

}

Usage in Template:

<p>{{ 'hello' | customPipe:'Greeting' }}</p>

<!-- Output: Greeting: HELLO -->