Show List
Tutorials > Angular > Angular Pipe

Angular Pipe

Pipe takes data (such as string, currency amount, date etc.) as input and transforms it into a different shape for display. Example: 

{{ Welcome | lowercase}} 
This would display the text in lower case "welcome"

There are some built in pipes in Angular. Custom pipes can also be created.

Built in Pipes

Here are some commonly used built in pipes in Angular.

date

Used to format date value. Expression:
{{ value_expression | date [ : format [ : timezone [ : locale ] ] ] }}

Example:
  • {{ dateProp | date }}               // output is of format 'mmm dd, yyyy'
  • {{ dateProp | date:'medium' }}      // output is 'mmm dd, yyyy, hh:mm:ss a'
  • {{ dateProp | date:'shortTime' }}   // output is 'hh:mm a'
  • {{ dateProp | date:'mm:ss' }}       


uppercase/lowercase/titlecase

Used to transform a text to uppercase/lowercase/titlecase. Expression:
{{ value_expression | uppercase }}
{{ value_expression | lowercase}}
{{ value_expression | titlecase}}

Example:
  • {{ stringProp | uppercase }}

currency

Used to transform a number to a currency string based on code, local etc. Expression:
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

Example:
  • {{123.25 | currency:"USD"}}   // Would display $123.25

decimal

Formats a number based on the digits and local. Expression:
{{ value_expression | number [ : {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} [ : locale ] ] }}

Example:
  • {{piProp | number:'4.1-5'}}   //When piProp is 3.14159265359, it would display 0,003.14159

percent

Formats a number to a percentage string. Expression:
{{ value_expression | percent [ : {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}[ : locale ] ] }}

Example:
  • {{1.3495 | percent:'4.3-5'}}  //Would display 0,134.950%

json

Transforms JavaScript object to JSON format. Expression:
{{ value_expression | json }}

Example:
  • {{ jsonProp | json }}
    When the value of jsonProp = {name:'Rob', age:'35', address:{Line1:'100 First Steer', Line2:'State K'}}, above expression will display {"name":"Rob", "age":"35", "address":{"Line1":"100 First Steer", "Line2":"State K"}}

slice

This returns slice of an array. Expression:
{{ value_expression | slice : start [ : end ] }}

Example:
  • {{[1,2,3,4,5,6,7] | slice:1:3 }}     //Would display 2,3

Creating Custom Pipe

Custom pipe is a TypeScript class with function to transform the data. 

The custom pipe we are going to create is "cuberoot" to get cube root of a number. CLI command to create a pipe is "ng g pipe cuberoot"

We are also going to create a new component pipedemo for display.

PS C:\Users\mail2\Downloads\angular\first-application> ng g pipe cuberoot
CREATE src/app/cuberoot.pipe.spec.ts (195 bytes)
CREATE src/app/cuberoot.pipe.ts (221 bytes)
UPDATE src/app/app.module.ts (699 bytes)

cuberoot.pipe.ts
The default code in the pipe TypeScript class is below:
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'cuberoot'
})
export class CuberootPipe implements PipeTransform {

  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }

}

Update it to as below
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'cuberoot'
})
export class CuberootPipe implements PipeTransform {

  transform(value: number): number {
    return Math.cbrt(value);
  }

}


app.module.ts

The pipe gets registered in the module automatically.
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MyDirectiveDirective } from './my-directive.directive';
import { PipedemoComponent } from './pipedemo/pipedemo.component';
import { CuberootPipe } from './cuberoot.pipe';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MyDirectiveDirective,
    PipedemoComponent,
    CuberootPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The custom pipe is now ready and can be called to get the cube root of the number. Expression:
{{ value_expression | cuberoot }}

Using the Built-in and Custom Pipes


pipedemo.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pipedemo',
  templateUrl: './pipedemo.component.html',
  styleUrls: ['./pipedemo.component.css']
})
export class PipedemoComponent implements OnInit {

  dateProp: Date = new Date();
  stringProp: string = "Hello World";
  piProp: number = 3.14159265359;
  jsonProp: any = { name: 'Rob', age: '35', address: { Line1: '100 First Steer', Line2: 'State K' } };

  constructor() { }

  ngOnInit(): void {
  }

}


pipedemo.component.html
{{ 64 | cuberoot }}
<br>
{{ dateProp | date }}
<br>
{{ dateProp | date:'medium' }}
<br>
{{ dateProp | date:'shortTime' }}
<br>
{{ dateProp | date:'mm:ss' }}
<br>
{{ stringProp | uppercase }}
<br>
{{ stringProp | lowercase}}
<br>
{{ stringProp | titlecase}}
<br>
{{123.25 | currency:"USD"}}
<br>
{{piProp | number:'4.1-5'}}
<br>
{{1.3495 | percent:'4.3-5'}}
<br>
{{ jsonProp | json }}
<br>
{{[1,2,3,4,5,6,7] | slice:1:3 }}
<br>
Output:
4
Oct 15, 2022
Oct 15, 2022, 10:12:50 PM
10:12 PM
12:50
HELLO WORLD
hello world
Hello World
$123.25
0,003.14159
0,134.950%
{ "name": "Rob", "age": "35", "address": { "Line1": "100 First Steer", "Line2": "State K" } }
2,3

Source Code:
https://github.com/it-code-lab/angular-application


Next: Angular Module

    Leave a Comment

  • captcha text