Angular Pipes

Pure Vs Impure Pipes in Angular

1. Pure Pipes (Stateless)
2. 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

        <!-- app.component.html -->

<p>Hello {{ 'angular' | uppercase}}</p>

UpperCasePipe with data from class

        <!-- 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

        <!-- app.component.html -->
  
<p>Hello {{'Angular' | lowercase}}</p>

LowerCasePipe with data from class

        <!-- 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

        <!-- app.component.html -->
  
<p>{{ 10 | currency}}</p>
  

CurrencyPipe Pound

        <!-- app.component.html -->
    
<p>{{ 10 | currency : 'GBP' }}</p>

CurrencyPipe Indian Ruppee

        <!-- 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

        <!-- app.component.html -->
  
<p> {{ 1699080657975 | date}}</p>

Date from Date Object

        <!-- 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.

        <!-- 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.

        <!-- 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>