Custom Pipes

Search…
Custom Pipes
Angular allows you to create your own custom pipes as well. Below is an example of custom pipe. It allows you to pass file sizes as input in bytes and displays output in more redable form. eg. 1024 bytes as input displays 1 KB as output in short form and 1 Kilobytes in long form.
1
import { Pipe, PipeTransform } from '@angular/core';
2
​
3
const FILE_SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
4
const FILE_SIZE_UNITS_LONG = ['Bytes', 'Kilobytes', 'Megabytes', 'Gigabytes', 'Pettabytes', 'Exabytes', 'Zettabytes', 'Yottabytes'];
5
​
6
@Pipe({
7
  name: 'formatFileSize'
8
})
9
export class FormatFileSizePipe implements PipeTransform {
10
  transform(sizeInBytes: number, longForm: boolean): string {
11
    const units = longForm
12
      ? FILE_SIZE_UNITS_LONG
13
      : FILE_SIZE_UNITS;
14
​
15
    let power = Math.round(Math.log(sizeInBytes) / Math.log(1024));
16
    power = Math.min(power, units.length - 1);
17
​
18
    const size = sizeInBytes / Math.pow(1024, power); // size in new units
19
    const formattedSize = Math.round(size * 100) / 100; // keep up to 2 decimals
20
    const unit = units[power];
21
​
22
    return `${formattedSize} ${unit}`;
23
  }
24
}
Copied!
Each custom pipe implementation must:
have the @Pipe decorator with pipe metadata that has a name property. This value will be used to call this pipe in template expressions. It must be a valid JavaScript identifier.
implement the PipeTransform interface's transform method. This method takes the value being piped and a variable number of arguments of any type and return a transformed ("piped") value.
Each colon-delimited parameter in the template maps to one method argument in the same order.
Above pipe can be used in below two ways:
Short Form: {{ largeFileSize | formatFileSize }} displaying output as 1 KB
Long Form : {{ largeFileSize | formatFileSize:true }} displaying output as 1 Kilobytes
​View Example​
Using Pipes
Stateful Pipes
Last modified 7mo ago
Copy link