Angular Pipes

Written By:

Updated on

  1. Home
  2. Frontend
  3. Angular
  4. Pipes
  1. UpperCasePipe
  2. LowerCasePipe
  3. CurrencyPipe
  4. DatePipe
  5. DecimalPipe
  6. PercentagePipe

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

  1. UpperCasePipe
  2. LowerCasePipe
  3. CurrencyPipe
  4. DatePipe
  5. DecimalPipe
  6. PercentagePipe

Types of pipes in Angular

  1. Stateless Pipes (Pure)
  2. Stateful Pipes (Inpure)

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>