angular/aio/content/guide/pipes-custom-data-trans.md

Creating pipes for custom data transformations

Create custom pipes to encapsulate transformations that are not provided with the built-in pipes. Then, use your custom pipe in template expressions, the same way you use built-in pipes—to transform input values to output values for display.

Marking a class as a pipe

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.

For details and more examples, see Pipe names.

Use name in template expressions as you would for a built-in pipe.

• Include your pipe in the declarations field of the NgModule metadata in order for it to be available to a template. See the app.module.ts file in the example application (). For details, see NgModules.
• Register your custom pipes. The Angular CLI ng generate pipe command registers the pipe automatically.

Using the PipeTransform interface

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

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

Example: Transforming a value exponentially

In a game, you might want to implement a transformation that raises a value exponentially to increase a hero's power. For example, if the hero's score is 2, boosting the hero's power exponentially by 10 produces a score of 1024. Use a custom pipe for this transformation.

The following code example shows two component definitions:

• The exponential-strength.pipe.ts component defines a custom pipe named exponentialStrength with the transform method that performs the transformation. It defines an argument to the transform method (exponent) for a parameter passed to the pipe.
• The power-booster.component.ts component demonstrates how to use the pipe, specifying a value (2) and the exponent parameter (10).

The browser displays the following:

Power Booster

Superpower boost: 1024

To examine the behavior of the exponentialStrength pipe in the , change the value and optional exponent in the template.

@reviewed 2023-01-06