Custom Pipes

• While Angular comes with a variety of built-in pipes for common tasks, custom pipes help developers process data transformations to their special needs. 
• This allows you to define custom logic for transforming input data into the desired output.

Example: Here we are creating a custom pipe to find a square of a number.

Step 1: Create an Angular project using Angular CLI.

ng new Angular

Step 2: Create a new pipe named ‘custom-pipes’

ng g pipe pipes/custom-pipes

Step 3: Now use the custom pipes in the ‘custom-pipes.pipe.ts’ to design your pipe according to your need.

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

@Pipe({
  name: 'square'
})
export class CustomPipesPipe implements PipeTransform {

  transform(value: number): number {
    return value * value;
  }

}

Step 4: Edit the 'app.component.ts' to define the number.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular';
  originalNumber=5;
}

Step 5: Now define the structure of the HTML for the desired result in  ‘app.component.html’.

<h1>Custom Pipes Example</h1>
<div>
    Original Number: {{originalNumber}}
</div>
<div>
    Squared Number :{{originalNumber | square}}
</div>

Step 6: Now run or compile the application.

ng serve

You will see the result on http://localhost:4200