Custom pipes - sravanthimendu98/angular GitHub Wiki

https://angular.dev/guide/templates/pipes

A pipe must have two things:

A name, specified in the pipe decorator A method named transform that performs the value transformation.

image

Naming convention for custom pipes The naming convention for custom pipes consists of two conventions:

  • name - camelCase is recommended. Do not use hyphens.
  • class name - PascalCase version of the name with Pipe appended to the end

Custom Pipes:

  • Uppercase Custom Pipe
  • Reverse String Pipe
  • Truncate Pipe
  • Exponential Strength Pipe

General Steps to Create Custom Pipes:

  1. Define the Pipe:

Use the @Pipe decorator. Implement the PipeTransform interface and its transform method.

  1. Declare the Pipe:

If you're not using a standalone pipe, declare it in your @NgModule within declarations.

  1. Use the Pipe:

You can use it in templates by adding | pipeName after the data you want to transform.