Pipes in Angular 12

Pipes in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

Pipe in angular

In this post we are going to learn what is pipe and how to use pipe in angular.

Basic Syntax :

{{value | pipe}}

In angular we use pipes to format the data, there are few built in pipes in angular.

Built In Pipes:

  • uppercase
  • lowercase
  • decimal
  • currency
  • date

Uppercase Pipe :

Uppercase pipe we use to convert string data into uppercase.

Example
src/app/app.component.html
<p>{{name| uppercase}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public name="code learning point";
}
Output : CODE LEARNING POINT

 

Lowercase Pipe :

Lowercase pipe we use to convert string data into lowercase.

Example
src/app/app.component.html
<p>{{name| lowercase}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public name="CODE LEARNING POINT";
}
Output : code learning point

 

Decimal Pipe:

Suppose in your application you are displaying price of a product like this 34012 , which is not readable so to make it readable we use decimal pipe  number is the keyword for decimal pipe.

Example :
src/app/app.component.html
<p>{{price| number}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public price=34012;
}


Output :  34,012

 

With the decimal pipe we can control the minimum and maximum number of digits we show after decimal point.

Basic Syntax :
{{value| number :'digits before decimal point . minimum number of digits after decimal point - maximum number of digits after decimal point' }}
Example :
src/app/app.component.html
<p>{{price| number:'1.2-2'}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public price=34012;
}


Output :  34,012.00

 

Currency Pipe :

Currency pipe we use to price amount.

Example :
src/app/app.component.html
<p>{{price| currency}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public price=34012;
}


Output :  $34,012.00

Currency pipe has option to take three parameters .

The first parameter is for specifying country currency code , default is USD.

<p>{{price| currency:'IND'}}</p>

The second parameter is for country currency , it takes boolean value true/false  if true then show the symbol if false then show the normal string

If true
<p>{{price| currency:'USD':true}}</p> 
Output : $34,012.00
If false
<p>{{price| currency:'USD':false}}</p> 
Output : USD34,012.00

The third parameter is for controlling the minimum and maximum number of digits to show after decimal point of the price.

Example :
src/app/app.component.html
<p>{{price| currency:'USD':false:'1.2-2'}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public price=34012;
}


Output :  USD34,012.00

 

Date Pipe :

Date pipe we use to format the date.

Example :
src/app/app.component.html
<p>{{dateToday |date}}</p>
src/app/app.component.ts
import { Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent{
  public dateToday=new Date();
}
Output :  Jul 17, 2021
Without date pipe
Output :  Sat Jul 17 2021 01:36:01 GMT+0530 (India Standard Time)

Angular provides options to format the date by passing parameter

Syntax:
<p>{{ dateToday | date : 'option' }}</p>
Example:
<p>{{dateToday|date:'short'}}</p> 
<!-- Output : 7/17/21, 1:38 AM -->
<p>{{dateToday|date:'medium'}}</p> 
<!-- Output : Jul 17, 2021, 1:42:20 AM -->
<p>{{dateToday|date:'long'}}</p> 
<!-- Output : July 17, 2021 at 1:42:58 AM GMT+5 -->
<p>{{dateToday|date:'full'}}</p> 
<!-- Output : Saturday, July 17, 2021 at 1:43:34 AM GMT+05:30 -->
<p>{{dateToday|date:'shortDate'}}</p> 
<!-- Output : 7/17/21 -->
<p>{{dateToday|date:'mediumDate'}}</p> 
<!-- Output : Jul 17, 2021 -->
<p>{{dateToday|date:'longDate'}}</p> 
<!-- Output : July 17, 2021 -->
<p>{{dateToday|date:'fullDate'}}</p> 
<!-- Output : Saturday, July 17, 2021 -->
<p>{{dateToday|date:'shortTime'}}</p> 
<!-- Output : 1:46 AM -->
<p>{{dateToday|date:'mediumTime'}}</p> 
<!-- Output : 1:47:04 AM -->
<p>{{dateToday|date:'longTime'}}</p> 
<!-- Output : 1:47:35 AM GMT+5 -->
<p>{{dateToday|date:'fullTime'}}</p> 
<!-- Output : 1:48:00 AM GMT+05:30 -->

 

 

I hope this article is helpful for you , i am very glad to help you thanks for reading

 

Related Posts

Card image cap

Angular Material Datepicker Example

Angular12 14-07-2021 Saheb Sutradhar

In this angular material datepicker post i will show you how to use Datepicker in angular app using angular material. ...

Card image cap

Angular Material Sidenav Example

Angular12 14-07-2021 Saheb Sutradhar

In this post you will learn how to implement angular material sidenav , in most of the realtime projects we use sidenav for the application navigation , even in ...

Card image cap

Property binding in angular 12

Angular12 14-07-2021 Saheb Sutradhar

In this post we are going to learn property binding  in angular . Before learning property binding in angular we should know the difference between HTML Attrib ...

Card image cap

Class binding in angular 12

Angular12 15-07-2021 Saheb Sutradhar

In this post we are going to see how we can bind class in angular . Class binding  in angular is very important when you work in a real time project. I have ex ...

Card image cap

Event Binding in Angular 12

Angular12 16-07-2021 Saheb Sutradhar

In this post we are going to learn what is event binding in angular, event binding is most important thing without event binding we can not build an angular app ...

Card image cap

Custom Pipe In Angular

Angular12 17-07-2021 Saheb Sutradhar

In this post you will learn how to create custom pipe in angular. When you need some data formatting which can not be done by using angular built-in pipes then ...