Creating Custom Pipes in Angular | Angular Pipes | Angular 15+

In Angular, pipes are a way to transform, format, or filter data before displaying it in a view. They are used in Angular templates to modify or adjust the data according to specific requirements without changing the original data or its source. Pipes are particularly useful for formatting strings, currency amounts, dates, and other data types.

Angular comes with several built-in pipes, such as:

• DatePipe: Formats a date value according to locale rules.
• UpperCasePipe: Transforms text to uppercase.
• LowerCasePipe: Transforms text to lowercase.
• CurrencyPipe: Transforms a number to a currency string, formatted according to locale rules.
• DecimalPipe: Transforms a number into a string with a decimal point, formatted according to locale rules.
• PercentPipe: Transforms a number to a percentage string, formatted according to locale rules.
• SlicePipe: Creates a new array or string containing a subset of the elements.
• JsonPipe: Converts a value into a JSON-formatted string.

<div>
    This is new user {{name| uppercase}}
</div>

CUSTOM PIPE:

1.goto app/pipes open cmd and run below command

ng generate pipe percentage

it will create a file in app/pipes/percentage.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'percentage'
})
export class PercentagePipe implements PipeTransform {
  transform(value: any, ...args: unknown[]): unknown {
    return value*10;
  }
}

import it in app.module.ts

import { PercentagePipe } from './pipes/percentage.pipe';

use pipe in view

<div>
    It will be 30*10 {{30| percentage}}
</div>