Angular 10 – Pipes

Pipes were previously ‘filters’ AngularJS and is a very important concept. In this part we would discuss pipes under the following headings.

1. What are Pipes?
2. Built-in Pipes
3. Practical Examples
4. Chaining Pipes
5. Creating Custom Pipes

1. What are Pipes?

In Angular, pipes are used to transform data. Strings, dates, arrays, currency and other data could be transformed. As such, the data is displayed in a certain format.

For example, pipes can be used to display a date data in different formats such as:

• November 24, 1994
• 22/11/1994
• 22-Nov-94

Angular uses the vertical bar | symbol. So if you have a variable called myDate, then you can display it a full date using the code below. You can try them.

Today’s date is {{myDate | date:’fullDate’}}

Today’s date is {{myDate | date:’shortDate’}}

Today’s date is {{myDate | date:’MM/dd/yyyy’}}

Today’s date is {{myDate | date:’dd-MMM-yyyy’}}

2. Built-in Pipes

Although you can create custom pipes in Angular, there are also a number of built-in pipes you can just use. Some of the common ones are given below:

• Uppercasepipe – Transforms a text into uppercase
• Lowercasepipe – Transforms a text into lowercase
• Datepipe – Used to transform a text into date based on locale rules
• Currencypipe – Used to format a number into a currency string based on local rules
• Jsonpipe – Used to render a text a json-formated string
• Percentpipe – Used to format a number into percentage string based on locale rules
• Decimalpipe – Used to format a number as a string with decimal point, based on locale rules
• Slicepipe – Used to extract and display only part of a text

Find list of build-in pipes here

3. Practical Example

Assign these variables in the ngOnInit() method as shown below:

  ngOnInit(): void {
    this.title = 'my-first-app';
    this.todaysdate = new Date();
    this.jsondata = {name: 'Saffron', age: '30', address: {a1: 'Lagos', a2: 'Nigeria'}};
    this.months = ['Jan', 'Feb', 'Mar', 'April', 'May', 'Jun',
      'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
  }

Then in the html file, place the markup:

<div style = "width:80%;">
  <div style = "width:45%;float:left;border:solid 1px darkred;">
    <h1>Uppercase Pipe</h1>
    <b>{{title | uppercase}}</b><br/>
    <h1>Lowercase Pipe</h1>
    <b>{{title | lowercase}}</b>
    <h1>Currency Pipe</h1>
    <b>{{7656.65 | currency:"USD"}}</b><br/>
    <b>{{5475.09 | currency:"USD":true}}</b> //True is used to show the sign of the currency.
    <h1>Date pipes</h1>
    <b>{{todaysdate | date:'dd/M/yyyy'}}</b><br/>
    <b>{{todaysdate | date:'shortTime'}}</b>
    <h1>Decimal Pipe</h1>
    <b>{{ 345.876876 | number: '3.4-4' }}</b> // 3 is for main integer, 4 -4 are for integers displayed.
  </div>
  <div style = "width:45%;float:left;border:solid 1px darkblue;">
    <h1>Percent Pipe</h1>
    <b>{{0.98754 | percent}}</b>
    <h1>Json Pipe</h1>
    <b>{{ jsondata | json }}</b>
    <h1>Slice Pipe</h1>
    <b>{{months | slice:3:8}}</b>
    // here 3 and 8 are the start and the end indexes
  </div>
</div>

4. Chaining Pipes

You can also apply more than one pipe to the same text. This is called chaining. For example, the code below displays a complete date and also transforms the text to uppercase.

<b>{{todaysdate | date:'fullDate' | uppercase}}</b><br/>

5. Creating Custom Pipes

You can also create your own pipe to provide formating that are not provided by any of the built-in pipes. Then you can use it the same way as a built-in pipe.

To do this, you need to mark the class as pipe using the @Pipe annotation. Also import Pipe and PipeTransform from Angular/Core. These are the steps to follow to create a custom pipe the returns the exponent of a number

Step 1 – Create the pipe using the command:

ng generate pipe Exponent

The complete class is shown below. I’ve written the transform function

@Pipe({
  name: 'exponent'
})
export class ExponentPipe implements PipeTransform {

  transform(value: number, power?: number): number {
    return Math.pow(value, isNaN(power) ? 1 : power);
  }

}

Step 2 – Use the pipe in you html component like shown below:

<p>Transforming 2 to power 5: {{2 | exponent: 5}}</p>

We’ll end the discussion on pipes here. And I hope you understand this important concept! I recommend you also watch the video for more clarification.