Angular Pipes and built-in pipe in angular

Angular Pipes are features built into angular 2 which basically allows you to transform output in your template. Pipes are functions that we can use in template expression to format input data before it’s rendered. Angular has lots of its own built-in pipes and we can use pipe for synchronous and asynchronous data.

Built-in pipe in Angular

Angular provides built-in pipes for typical data transformations, including transformations for internationalization (i18n), which use locale information to format data. We can use built-in pipes to transform strings, currency amounts, dates, and other data for display. To check all built-in pipe in Angular check official documentation link on pipe.

Common built-in pipe in angular.

  1. AsyncPipe Currency
  2. Pipe DatePipe
  3. DecimalPipe
  4. I18nPluralPipe
  5. I18nSelectPipe
  6. JsonPipe
  7. KeyValuePipe
  8. LowerCasePipe
  9. PercentPipe
  10. SlicePipe
  11. TitleCasePipe
  12. UpperCasePipe

Example of built-in pipe in angular

In our first example we will use lowercase pipe to transform our text into lowercase.
In lowercase: <pre>'{{ 'EdUpALa'| lowercase}}'</pre>

Where lowercase is a built-in pipe and transforms the value of our string to lowercase. The pipe operator ( | ). It is used for the transformation of the expressions. The pipe operator passes the result of the expression on the left to a pipe function on the right.

Currency Pipe
The CurrencyPipe pipe formats a number as a currency input, convert to the custom currencies format. Syntax of this pipe with three optional parameters utilizing the following format:

<element>
{{ value_expression | currency [ : currencyCode [ : display [ : digitFormat [ : locale ] ] ] ] }}
</element>
ParameterDescription
currencyCodeISO 4217 currency code.Of type string default value undefined,Optional
display We can display Currency ‘symbol’ or ‘code’ or ‘symbol-narrow’ or our own string.Of type string, Optional Default value is ‘symbol’
locale represents locale format rules. Default value is our project locale if set or undefined.Optional
digitsInfoRepresents Decimal representation of currency value.Of type string default value undefined,Optional

In the example below, we are using a currency pipe to format the amount into an Indian currency format.

built-in pipe in angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <code ngNonBindable>{{ amount | currency:'USD':'symbol' }} : </code>{{ amount | currency:'USD':'symbol' }}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR' }} : </code>{{ amount | currency:'INR' }}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR':'code' }} : </code> {{ amount | currency:'INR':'code' }}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR':true:'.2'}} : </code> {{ amount | currency:'INR':true:'.2'}}
    </div>
    <div>
      <code ngNonBindable>{{ amount | currency:'INR': 'symbol-narrow' }} : </code> {{ amount | currency:'INR': 'symbol-narrow' }}
    </div>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  amount = 100000;

  constructor() {
  }

}

Angular allows us to create our own custom pipe and check articles on how to create a custom pipe.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top