Create a custom pipe

You can create custom pipes in Angular to fit your data transformation needs.

In this activity, you will create a custom pipe and use it in your template.

A pipe is a TypeScript class with a @Pipe decorator. Here's an example:

      
import {Pipe, PipeTransform} from '@angular/core';@Pipe({  name: 'star',})export class StarPipe implements PipeTransform {  transform(value: string): string {    return `⭐️ ${value} ⭐️`;  }}

The StarPipe accepts a string value and returns that string with stars around it. Take note that:

  • the name in the @Pipe decorator configuration is what will be used in the template
  • the transform function is where you put your logic

Alright, it's your turn to give this a try — you'll create the ReversePipe:

  1. Create the ReversePipe

    In reverse.pipe.ts add the @Pipe decorator to the ReversePipe class and provide the following configuration:

          
    @Pipe({    name: 'reverse'})

  2. Implement the transform function

    Now the ReversePipe class is a pipe. Update the transform function to add the reversing logic:

          
    export class ReversePipe implements PipeTransform {    transform(value: string): string {        let reverse = '';        for (let i = value.length - 1; i >= 0; i--) {            reverse += value[i];        }        return reverse;    }}

  3. Use the ReversePipe in the template

    4. With the pipe logic implemented, the final step is to use it in the template. In app.component.ts include the pipe in the template and add it to the component imports:

          
    @Component({    ...    template: `Reverse Machine: {{ word | reverse }}`    imports: [ReversePipe]})

And with that you've done it. Congratulations on completing this activity. You now know how to use pipes and even how to implement your own custom pipes.