Pipes in Angular

The Code Points May 29, 2022 0

In this article, we will learn about the how to use Angular Pipes. We will learn how to pass arguments to the pipe and chain many pipes together. We will also learn some of the other built-in pipes, such as currency, date, number, percent, decimal, and slice pipes, among others.

Pipes Syntax

The pipe's syntax is as follows:

Expression | pipeOperator[:pipeArguments]

Expression: is the expression, which you want to transform

| : is the Pipe Character

pipeOperator: name of the Pipe

pipeArguments: arguments to the Pipe

Example

Let's use the built-in date pipe in Angular to convert the date in this example.

Open the app.component.ts file and add the following code:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    templateUrl: `<p> Unformatted date : {{toDate }} </p>
                  <p> Formatted date : {{toDate | date}} </p>` 
}) 
export class AppComponent 
{ 
    title: string = 'pipe Example' ; 
    toDate: Date = new Date(); 
}

The date pipe is used in the preceding example to turn the current date into an easily readable format. For reference, we've included the unformatted date format. The result is as follows:

Add arguments to pipes

Optional arguments can also be passed to the pipe. The arguments are added to the pipe through a colon (:) followed by the argument's value. If there are numerous arguments, use the colon to separate them (:). For example, we can send the format as an Optional argument to the date pipe. The format parameter has a valid value of medium, which shows the date in yMMMdjms format. The following is an example of code.

{{toDate | date:'medium'}}

Chaining Pipes

Pipes can be linked together to use more than one pipe in a single expression. The toDate is supplied to the Date Pipe in the following code, for example. The uppercase pipe receives the output of the Date pipe.

toDate | date | uppercase

Angular Built-in pipes

Angular comes with a number of built-in pipes that you may use in your application. This link will take you to a page where you can learn more about them.

Date Pipe, Uppercase Pipe, Lowercase Pipe, Number Pipe/ Decimal Pipe, Currency Pipe, and Percent Pipe are just a few of the significant pipes.

DatePipe

The Date pipe formats the date using locale-specific criteria. The date pipe has the following syntax.

date_expression | date[:format]

date_expression is a date object or a number

date is the name of the pipe

format is a date and time format string that specifies how date/time components should be displayed.

Example of Datepipe

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    template:`<p>medium : {{toDate | date:'medium'}} </p>
              <p>short : {{toDate | date:'short'}} </p>
              <p>fullDate : {{toDate | date:'fullDate'}} </p>
              <p>longDate : {{toDate | date:'longDate'}} </p>
              <p>mediumDate : {{toDate | date:'mediumDate'}} </p>
              <p>shortDate : {{toDate | date:'shortDate'}} </p>
              <p>mediumTime : {{toDate | date:'mediumTime'}} </p>
              <p>dd-MM-y : {{toDate | date:'dd-MM-y'}} </p>
              <p>dd-MM-yy HH:mm : {{toDate | date:'dd-MM-yy HH:mm'}} </p>`
})
export class AppComponent
{
    title: string = 'Angular pipes Example' ;
    toDate: Date = new Date();
}

Example of UpperCasePipe & LowerCasePipe

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
 
@Component({
    selector: 'app-root',
    template:`<p>Unformatted :{{msg}} </p>
              <p>Uppercase :{{msg | uppercase}} </p>
              <p>Lowercase :{{msg | lowercase}} </p>`
})
export class AppComponent
{
    title: string = 'Angular pipes Example' ;
    msg: string= 'Welcome to Angular';
}

Conclusion

In this article, we learned about the how to use Angular Pipes also we looked how to pass arguments to the pipe.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.