Building custom pipe

Let’s create a pipe that reverses the string.

ng generate pipe pipes/reverse --standalone --skip-tests=true

To mark a class as a pipe and supply configuration metadata, apply the @Pipe decorator to the class.

Use UpperCamelCase (the general convention for class names) for the pipe class name, and camelCase for the corresponding name string. Do not use hyphens in the name.

Implement the PipeTransform interface in your custom pipe class to perform the transformation.

Angular invokes the transform method with the value of binding as the first argument, and any parameters as the second argument in list form, and returns the transformed value.

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

@Pipe({
  name: 'reverse',
  standalone: true
})
export class ReversePipe implements PipeTransform {

  transform(input: string): string {
    return input.split('').reverse().join();
  }

}

Import ReversePipe in CardComponent to use it.

<!-- card.component.html -->
<mat-card-title>{{title | uppercase | reverse}}</mat-card-title>

Order of pipes are important. For example, output of uppercase pipe is input to reverse pipe.