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 pipes for synchronous and asynchronous data.

In this tutorial, we’ll learn how to implement angular pipe and demonstrate few example of built-in pipe in Angular and at last we will create our own custom angular pipe.

What is Angular pipes ?

Angular pipes are classes that are used to prepare data for display to the user. Angular pipes are mainly used for data transformation in HTML templates and with help of pipes, we can convert input data to desired output format in HTML templates.

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 pipes in Angular check the official documentation link on the pipe.

Common built-in pipe in angular.

Angular has lots of built-in Angular pipes and we can use it directly on our Angular template without writing any class or component.

  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

Here we will list some of the common Angular pipes.

Filter NameDescriptionSyntaxOutput
lowercaseConvert the data input value to all lowercase.{{ PropertyInputvalue | lowercase }}
example {{ ‘EDUPALA’ | lowercase }}
edupala
uppercaseConvert the data input value to all uppercase.{{ PropertyInputvalue | uppercase }}
example {{ ‘Edupala’ | lowercase }}
EDUPALA
currencyAdd currency symbol at starting of value. Value of currency can be USD, EUR, CAD, and more{{ 1234.56 | currency:’INR’ }}₹1,234.56
sliceThis filter will slice a piece of data from the input string by specifying starting and end values.Slice from 0 – 7 {{ ‘edupala.com’ | slice:0:7 }}edupala
dateConvert the input string to date format.{{ date1 | date: ‘shortTime’ }}
{{ date1 | date: ‘dd/MMM/yyyy’ }}
{{ newdate | date: ‘fullDate’ }}
2:15 PM
08/Sep/2021
Wednesday, September 8, 2021

Example of Angular built-in pipe

In our first example, we will use the 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, and convert it 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
displayWe can display Currency ‘symbol’ or ‘code’ or ‘symbol-narrow’ or our own string. Of type string, Optional Default value is ‘symbol’
localerepresents locale format rules. The 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
Angular built-in pipe
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() {
  }

}

Example of angular custom filter or Angular custom pipe

In the example below, we’ll learn how to create a custom filter and demonstrate an example of it. We want to convert the first character of data to capital letters. Let’s create an angular project.

ng new angularFilterExample

Once we have created our angular project, and next create a custom Angular pipe by running the following command.

ng generate pipe pipes/capitalizeFirst

By running the above command will capitalizeFirstPipe in the app.pipes folder.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'capitalizeFirst' })
export class CapitalizeFirstPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

The @Pipe decorator is applied to a class and used to specify a name by which the pipe can be used in a template. We can see that the Angular filter has imported Pipe and PipeTransform from the Angular core module.

We need to implement the PipeTransform interface, which forces us to have a defined transform() method based on our requirements. In our case, we are transforming the first character to a small letter and let edit the capitalize-first.pipe.ts file.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'capitalizeFirst' })
export class CapitalizeFirstPipe implements PipeTransform {
  transform(value: string): string {
    return value.charAt(0).toUpperCase() + value.substring(1).toLowerCase();
  }
}

In our angular filter, transform method, we are converting the first character to capital and remaining to lower case.

Used our Angular custom pipe in our component template

We have created our custom angular filter, and now use it in our component template. For demonstration, let’s add this in the app.component.html template as follow.

{{ 'edUPALA' | capitalizeFirst  }}
Angular custom pipe
Angular custom pipe

The input property value edUPALA is converted to Edupala and we can use a variable instead of a static string.

Conclusion
We have completed our Angular pipe and how easy to create an angular custom pipe. We have demonstrated an example of transforming input string to capitalize string in our app.component.html template.

Related posts

Spread the love

Leave a Comment

Your email address will not be published.

Scroll to Top