Angular - Pipes

In this article, we are going to talk about Pipes in Angular.

Pipes (|) in Angular are used to transform the data before displaying it in a browser. Angular provides a lot of built-in pipes to translate the data before displaying it into the browser and as we know, Angular lets us extend its feature, we can even create custom pipes in Angular. So in this article, we are going to learn the built-in pipes which are provided by Angular and in the next article, I will explain how to create custom pipes.

So, in this article, we will learn what inbuilt pipes are provided by Angular and how to use them. We will display simple variables using the interpolation({{}}) on screen and will apply filters to transform the data.

To build a screen, we need only one component (AppComponent) and respective HTML template file.

We will see the following inbuilt pipes,

• Pipes which we can apply to Strings
• Pipes which we can apply to Numbers
• Pipes which we can apply to Date

Pipes which we can apply to String

• Uppercase - We can use this pipe to convert the data-bound expression to uppercase.
• Lowercase - We can use this pipe to convert the data-bound expression to lowercase.
• Slice – We can use this pipe to extract the substring from the data-bound expression. This pipe takes two parameters - starting index of a string and the last index of the string.

Ex. {{name | slice: ‘startIndex’: ’lastIndex’}} we can pass parameters to the pipe using the colon(:)

Copy paste the below code in the .ts file.

import {
    Component
} from '@angular/core'
@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
})
export class AppComponent {
    public name: string = "C# Corner";
}

In the above code, I have just declared one variable name and I am displaying that variable in HTML using the interpolation ({{value}}). Now, open the HTML file and copy paste the below code.

<div class="container">
    <h4> <b>Original String - </b>{{ name }}</h4>
    <h4> <b>uppercase pipe - </b>{{ name | uppercase }}</h4>
    <h4> <b>lowercase pipe - </b>{{ name | lowercase }}</h4>
    <h4> <b>slice pipe - </b>{{ name | slice: 3: 9}}</h4>
</div>

As shown in the above code, I am just displaying the variable using the interpolation and I have applied pipes using the pipe (|) symbol.

See the below output screen.

Pipes which we can apply to Numbers

We can use these pipes to format the numbers

• Number – We can use this pipe to convert the number to a different format.
• Currency – We can use this pipe to show currency symbol. This pipe takes two parameters - currency i.e USD, EURO, and GTP; and the Boolean value which decides whether we want to display the currency symbol or not. See the below code and output screenshot for more information.

Copy and paste the below code in the .ts file.

import {
    Component
} from '@angular/core'
@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
})
export class AppComponent {
    public number: Number = 3.14;
}

As you can see in the above code, I have just declared one variable and assigned one numeric value to it and I am displaying that value on the screen using interpolation and applying the number and currency pipe to change the format.

Open the HTML file and paste the below code.

<div class="container">
    <h4> <b>Original Number - </b>{{ pi }}</h4>
    <h4> <b>number pipe - </b>{{ pi | number: '1.3-3' }}</h4>
    <h4> <b>currency pipe - </b>{{ pi | currency:'USD':true }}</h4>
    <h4> <b>currency pipe - </b>{{ pi | currency:'EUR':true}}</h4>
</div>

See the below output screen for the number pipe.

Pipes which we can apply to Date

As the name suggests, this pipe is used to format the date or to change the format of the date. See the below code and output screen.

Open the .ts file and paste the below code.

import {
    Component
} from '@angular/core'
@Component({
    selector: 'my-app',
    templateUrl: './app/app.component.html',
})
export class AppComponent {
    public todaysDate: Date = new Date();
}

As you can see in the above code, I have created one variable and assigned the date to it, then applied different date formats to it using date pipe.

Open the HTML file and paste the below code.

<div class="container">
    <h4> <b>Original Date - </b>{{ todaysDate }}</h4>
    <h4> <b>date pipe(shortDate) - </b>{{ todaysDate | date:'shortDate' }}</h4>
    <h4> <b>date pipe(longDate) - </b>{{ todaysDate | date:'longDate' }}</h4>
    <h4> <b>date pipe(mediumDate)- </b>{{ todaysDate | date:'mediumDate'}}</h4>
</div>

See the below output screen for the date pipe.

So in this way, we can use pipes to transform the data into different formats. Please refer to the Angular official documentation for different date formats. In our next article, we will learn about how to create a custom pipe in Angular.

Hope this will help you.

Thanks.