Pipes are very easy to define. We essentially need to do the following:

• Import Pipe and PipeTransform
• Implement the PipeTransform interface
• Add the Pipe component to modules

The full code for implementing the Pipe would look something like this:

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

@Pipe({
  name : 'myPipeName'
})
export class MyPipe implements PipeTransform {
  transform( value: any, ...args: any[]): any {
    // We apply transformations to the input value here
    return something;
  }
}
@Component({
  selector : 'my-selector',
  template : '<p>{{ myVariable | myPipeName: "bar"}}</p>'
})
export class MyComponent {
  myVariable: string = 'Foo';
}

Let's break down the code in the upcoming subsections.