Angular Pipes

Back to: Angular Tutorials For Beginners and Professionals

Angular Pipes with Examples

In this article, I am going to discuss Angular Pipes with examples. Please read our previous article where we discussed Angular Directives in Detail. At the end of this article, you will understand the following pointers in detail.

1. What are Angular Pipes?
2. When and how to use Pipes in Angular Application?
3. Different types of Pipes with examples.

Why we need Angular Pipes?

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 formatted 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 to the end-user, but that will not 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 Pipes in Angular Application?

The Angular Pipe takes the raw data as input and then transforms the raw data into some desired format. So in simple words, we can say that the angular pipes transform the data into a specific format before displaying them to the end-users.

Using the Pipe (|) operator, we can apply the pipes features to any of the property in angular application. There are so many built-in pipes provides by Angular Framework such as lowercase, uppercase, titlecase, decimal, date, percent, currency etc. It is also possible to create custom pipes.

Syntax to use Pipes in Angular Application:

Syntaxes are written inside the HTML. The syntax to use the Angular Pipe is given below. To apply a pipe on a property, you need to use the pipe operator “|”.

Types of Pipes in Angular:

The Angular Framework divided the Pipes into two types i.e. Built-in Pipes and Custom Pipes. Further Built-in Pipes are divided into two types i.e. Parameterized and chaining as shown in the below image.

Example to understand Angular Pipes:

Let us see an example to understand pipes. First we will see the output without pipes and then we will see the output with pipes.

Modify app.component.ts file:

Please modify the app.component.ts file as shown below. Here, we have created one student array with some dummy data that we want to show in the web page.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  students: any[] = [
      {
          ID: 'std101', Name: 'RaKesh ROUT',
          DOB: '12/8/1988', Gender: 'Male', CourseFee: 1234.56
      },
      {
          ID: 'std102', Name: 'ANURAG Mohanty', 
          DOB: '10/14/1989', Gender: 'Male', CourseFee: 6666.00
      },
      {
          ID: 'std103', Name: 'Priyanka Dewangan', 
          DOB: '7/24/1992', Gender: 'Female', CourseFee: 6543.15
      },
      {
          ID: 'std104', Name: 'Hina SHARMA', 
          DOB: '8/19/1990', Gender: 'Female', CourseFee: 9000.50
      },
      {
          ID: 'std105', Name: 'SamBIt SataPATHY',
          DOB: '4/12/1991', Gender: 'Male', CourseFee: 9876.54
      }
  ];
}

Modify app.component.html file:

Please modify app.component.html file as shown below. As you can see at the moment we are not using any pipes.

<table border="1">
  <thead>
      <tr>
          <th>Student ID</th>
          <th>Name</th>
          <th>DOB</th>
          <th>Gender</th>
          <th>Course Fee</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor='let student of students'>
          <td>{{student.ID}}</td>
          <td>{{student.Name}}</td>
          <td>{{student.DOB}}</td>
          <td>{{student.Gender}}</td>
          <td>{{student.CourseFee}}</td>
      </tr>
  </tbody>
</table>

Now, if you browse the application, then you will get the following output in the browser.

As you can see in the above image, the data is not that user friendly. Let us discuss how we want to display the above data. We want to display the Student ID in upper case character and Name using the title case i.e. first character of every word in uppercase. Again, we want to display display the Date of Birth in MM/DD/YYYY format. We can achieve this by using the date pipe. Again we want to display the Gender in lower case and finally, we want to display the course Fee using the $ sign as shown in the below image.

How can we achieve the above output?

In order to achieve the desired output, we are going to use the following built-in pipes.

1. lowercase: This is used to convert the characters into lower case.
2. uppercase: This is used to convert the characters into upper case.
3. titlecase: This built-in pipe is used to convert the first character in each word to upper case.
4. date: This pipe is used to convert a date to some specific format.
5. currency: this pipe is used to convert number to currency with currency symbol.

So, modify the app.component.html file as shown below to use the required built-in pipes to get the desired output.

<table border="1">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Name</th>
            <th>DOB</th>
            <th>Gender</th>
            <th>CourseFee</th>            
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let student of students'>
            <td>{{student.ID | uppercase}}</td>
            <td>{{student.Name | titlecase}}</td>
            <td>{{student.DOB | date:'dd/MM/yyyy'}}</td>
            <td>{{student.Gender | lowercase}}</td>
            <td>{{student.CourseFee | currency:'USD':true}}</td>
        </tr>
    </tbody>
</table>

 

Now, run the application and you should get the output as expected. Here, I just show you how to use Pipes with simple examples. But you can do a lot more using pipes that we are going to discuss in detail from our next article.

In the next article, I am going to discuss Parameterized Pipes in Angular Application. Here, 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.