Angular Pipes
Written By: Avinash Malhotra
Updated on
Angular Pipes are functions used in templates to transform input data to upperCase, lowerCase, currency, date etc.
Pipes only change data on view layer, not in model. Means if a string is lowercase by-default, pipe will only print UpperCase in template, not in actual model. So our actual data will remain same, only output will be manipulated in DOM.
Build in pipes in Angular
- UpperCasePipe
- LowerCasePipe
- CurrencyPipe
- DatePipe
- DecimalPipe
- PercentagePipe
Pure Vs Impure Pipes in Angular
- Pure Pipes (Stateless)
- Impure Pipes (Stateful)
Pure Pipes
Pure Pipes are stateless pipes which re-execute only when pure inputs change. It will only re-execute if value of input arguments changes. If the input value is same, it will return cached value. That's why Pure Pipes are fast and efficient.
Pure states are recommended in simple transformations like string, date etc.
Impure Pipes
Impure Pipes are stateful pipes which re-execute on every change detection. The impure pipes re-execute on every change detection, even if the input arguments is same. This makes them less efficient then pure pipes, but they are more flexible then pure pipes.
Impure pipes are recommended in Asynchronous operations, Observables, Promises and global states.
UpperCasePipe
UpperCasePipe Pipe is used to change string to uppercase in Angular Template irrespective of input string. If input in model is lowercase, it will remain lowercase, only output will change.
UpperCasePipe Example
Hello ANGULAR
<!-- app.component.html -->
<p>Hello {{ 'angular' | uppercase}}</p>
UpperCasePipe with data from class
JAVASCRIPT
<!-- app.component.html -->
<p> {{ name | uppercase}}</p>
<!-- app.component.ts -->
export class AppComponent {
name="javascript";
}
LowerCasePipe
LowerCasePipe transform string input to lower case in template without affecting actual string in component class.
LowerCasePipe Example
Hello angular
<!-- app.component.html -->
<p>Hello {{'Angular' | lowercase}}</p>
LowerCasePipe with data from class
javascript
<!-- app.component.html -->
<p>{{ name | lowercase}}</p>
<!-- app.component.ts -->
export class AppComponent {
name="JavaScript";
}
CurrencyPipe
CurrencyPipe transform string input to lower case in template without affecting actual string in component class.
CurrencyPipe Dollar
$10.00
<!-- app.component.html -->
<p>{{ 10 | currency}}</p>
CurrencyPipe Pound
£10.00
<!-- app.component.html -->
<p>{{ 10 | currency : 'GBP' }}</p>
CurrencyPipe Indian Ruppee
₹10.00
₹12,345.00
<!-- app.component.html -->
<p>{{ 10 | currency : 'INR' }}</p>
<p>{{ 12345 | currency : 'INR':'symbol':'4.2-2' }}</p>
DatePipe
DatePipe transform Date Object to desired date or time format in template. The input of date should be number ( epoch timestamp ) or date object from class component.
DatePipe example
Nov 4, 2023
<!-- app.component.html -->
<p> {{ 1699080657975 | date}}</p>
Date from Date Object
Nov 4, 2023
Nov 4, 2023, 12:24:37 PM
12:26 PM
12:26:45
Nov 04, 2023 at 12:29 PM
<!-- app.component.html -->
<p>{{ date | date}}</p>
<p>{{ date | date:'medium'}}</p>
<p>{{ date | date:'shortTime'}}</p>
<p>{{ date | date:'hh:mm:ss'}}</p>
<p>{{ date | date:'MMM dd, yyyy 'at' hh:mm a'}}</p>
<!-- app.component.ts -->
export class AppComponent {
date=new Date();
}
DecimalPipe
DecimalPipe is used to convert Decimals to desired number.
2.2
2
3
<!-- app.component.html -->
<p>{{ 2.2 | number}}</p>
<p>{{ 2.2 | number: '1.0-0'}}</p>
<p>{{ 2.8 | number: '1.0-0'}}</p>
PercentagePipe
PercentagePipe is used to convert numbers to Percentage and also add % after value.
200%
50%
60.0%
008.33333%
<!-- app.component.html -->
<p>{{ 2 | percent}}</p>
<p>{{ 0.5 | percent}}</p>
<p>{{ 3/5 | percent:'2.1-5'}}</p>
<p>{{ 1/12 | percent:'3.3-5'}}</p>