In this article we will learn about Parameterized Pipes in Angular. In parameterized pipes we can pass any number of parameters to the pipe using a colon (:)
. Please read my previous article Angular Pipe.
What are Parameterized Pipes?
In Angular, we can pass any number of parameters to the pipe using a colon (:) and when we do so, it is called Angular Parameterized Pipes. The syntax to use Parameterized Pipes in Angular Application is given below.
Syntax
{{ data | PipeName : Parameter1,Parameter2 ...... Parametern }}
Date Format with Pipe using Expression
Synatx:
date_expression
is a date object or a numberdate
is the name of the pipeformat
is the date and time format string which indicates the format in which date/time components are displayed.
date_expression | date[:format]
export class AppComponent {
currentDate: Date = new Date();
}
<p>LongDate : {{currentDate | date:'longDate'}} </p>
<p>medium : {{currentDate | date:'medium'}} </p>
<p>mediumDate : {{currentDate | date:'mediumDate'}} </p>
<p>mediumTime : {{currentDate | date:'mediumTime'}} </p>
<p>short : {{currentDate | date:'short'}} </p>
<p>shortDate : {{currentDate | date:'shortDate'}} </p>
<p>fullDate : {{currentDate | date:'fullDate'}} </p>
<p>dd-MM-y : {{currentDate | date:'dd-MM-y'}} </p>
<p>dd-MM-yy HH:mm : {{currentDate | date:'dd-MM-yy HH:mm'}} </p>

If you want to learn more about date pipe, follow this link.
CurrencyPipe
Formats a number as currency using locale rules.
Syntax
number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]
- number_expression currency to format a number as currency.
- Currency is the name of the pipe
- currencyCode is the ISO 4217 currency code, such as USD for the US dollar and EUR for the euro.
- symbolDisplay is a Boolean indicating whether to use the currency symbol or code. Use true to display symbol and false to use code
- digitInfo is similar to the one used in decimal pipe
export class AppComponent {
value: number= 1021;
}
<p>Unformatted : {{value}} </p>
<p>Currency converted Dollar : {{value | currency }} </p>
<p>Currency converted Rupees : {{value | currency:'INR':true:'4.2-2'}} </p>
<p>Currency converted Euro : {{value | currency:'EUR':true:'4.2-2'}} </p>

Conclusion
In this article we will learnt about Parameterized Pipes in Angular. In parameterized pipes we can pass any number of parameters to the pipe using a colon (:)
.
Leave behind your valuable queries, suggestions in the comment section below regarding article How to Implement Repository Pattern in ASP.Net Core Web API. Also, if you think this article help to you, do not forget to share this within your developer community. Happy Coding 🙂
Related Articles
- How to host Angular app on AWS S3 bucket using CloudFront
- How to Deploy Angular App in GitHub Pages
- C Programming- Recursion in C
- C Program to Add Two Numbers Using Functions
- Steps to create Azure Resource Group
- Deploy ASP.Net Core apps to Azure App Service
- How to use Signature Pad Component in Angular
- How to use Drag and Drop items in Angular
- Ionic Framework Tutorial: Build your first Ionic cross-platform mobile app
- Difference between Injector, @Injectable & @Inject in Angular
Jayant Tripathy
Coder, Blogger, YouTuberA passionate developer keep focus on learning and working on new technology.