+1 vote
in Angular by

Give an example of custom pipe?

1 Answer

0 votes
by
You can create custom reusable pipes for the transformation of existing value. For example, let us create a custom pipe for finding file size based on an extension,

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

  @Pipe({name: 'customFileSizePipe'})

  export class FileSizePipe implements PipeTransform {

    transform(size: number, extension: string = 'MB'): string {

      return (size / (1024 * 1024)).toFixed(2) + extension;

    }

  }

Now you can use the above pipe in template expression as below,

   template: `

      <h2>Find the size of a file</h2>

      <p>Size: {{288966 | customFileSizePipe: 'GB'}}</p>

    `
...