Angular Pipes

Angular Pipes

In this article, I am going to discuss the Angular Pipes with examples. As we already know every web application starts with a simple task: first get the data, then transform the data into some format, and finally, show the data to the users.

Getting the data is very simple, you can create a local variable or a complex type to hold the data or even you may get the data from APIs.

Once you get the data, then you could show the raw data as it is directly in the view, but that could barely make a good user experience. To get a good user experience we need to modify the raw data into some specific format and in such cases, Angular Pipes plays an important role.

What are Angular Pipes?

The Angular Pipe takes the raw data as input and then transforms the raw data into the desired format. So in simple, we can say that the angular pipes transform the data into a specific format before display.

There are so many built-in pipes provides by Angular are as follows lowercase, uppercase, decimal, date, percent, currency etc. We can also create our custom pipes which we will discuss in our upcoming articles.

To apply a pipe on a property, you need to use the pipe character ” | ” as shown below

Angular Pipes

You can also chain pipes means you can use multiple pipes to a single property as shown in the below image.

Angular Pipes

If you need to pass multiple parameters to a pipe, then you need to separate each parameter using the colon “:” as shown below.

Angular Pipes

Example:

We want to display the student information in the below format.

Angular Pipes

As shown in the above image, we want to display the First Name in upper case character and last name in lower case to characters. To do so we need to use the uppercase and lowercase pipes respectively. We also display the Date of Birth in two columns. One column of DOB displays the data in Full date format while in the second DOB column we display the data in MM/DD/YYYY format. We can achieve this by using the date pipe. Finally, we want to display the course Fee using the $ sign and after the decimal point, we need to show maximum two digits.

To achieve this, let’s first modify the StudentList.Component.ts file as shown below. The important point to remember here is that we need to provide the DOB in MM/DD/YYYY format otherwise we will not get the data as expected. We will discuss this in details in our next article where we will discuss how to create Custom Pipes in Angular.

import { Component } from '@angular/core';

@Component({
    selector: 'student-list',
    templateUrl: 'app/Student/StudentList.Component.html',
    styleUrls: ['app/Student/StudentList.Component.css']
})

export class StudentListComponent {
    students: any[] = [
        {
            ID: 'std101', FirstName: 'Pranaya', LastName: 'Rout',
            DOB: '12/8/1988', Gender: 'Male', CourseFee: 1234.56
        },
        {
            ID: 'std102', FirstName: 'Anurag', LastName: 'Mohanty', 
            DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
        },
        {
            ID: 'std103', FirstName: 'Priyanka', LastName: 'Dewangan', 
            DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
        },
        {
            ID: 'std104', FirstName: 'Hina', LastName: 'Sharma', 
            DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
        },
        {
            ID: 'std105', FirstName: 'Sambit', LastName: 'Satapathy',
            DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
        }
    ];
}

Then modify the StudentList.Component.html file as shown below.

<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>DOB FullDate</th>
            <th>DOB (DD|MM|YYYY)</th>
            <th>Course Fee</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let student of students'>
            <td>{{student.FirstName | uppercase}}</td>
            <td>{{student.LastName | lowercase}}</td>      
            <td>{{student.DOB | date:'fullDate' |uppercase}}</td>
            <td>{{student.DOB | date:'dd/MM/y'}}</td>
            <td>{{student.CourseFee | currency:'USD':true:'1.2-2'}}</td>
        </tr>
        <tr *ngIf="!students || students.length==0">
            <td colspan="10">
                No Students to display
            </td>
        </tr>
    </tbody>
</table>

Now run the application and you will see the data on the page as expected.

For the list of date pipe parameter values please follow the below link

https://angular.io/api/common/DatePipe

In the above example, we are passing 3 parameters to the currency pipe as shown below

<td>{{student.CourseFee | currency:’USD’:true:’1.2-2′}}</td>

  1. The first parameter is the currency Code i.e. USD
  2. The second parameter is boolean – True to display currency symbol i.e. $, false to display currency code i.e. USD
  3. The third parameter (‘1.2-2’) specifies the number of integer and fractional digits

In the next article, I will discuss creating custom pipes in Angular.

SUMMARY:

In this article, I try to explain the Angular Pipes with examples. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

No HTML was returned.

Leave a Reply

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