Back to: Angular Tutorials For Beginners and Professionals
Angular Parameterized Pipes with Examples
In this article, I am going to discuss Angular Parameterized Pipes in detail. Please read our previous article where we discussed the basics of Angular Pipes. At the end of this article, you will understand what exactly Angular Parameterized Pipes are and when and how to use these pipes in Angular Application?
What are Angular 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.
Date Pipe:
Let us understand the Parameterized Date pipes with some examples. When you worked with any real-time applications, then you need to display the date time data in different formats. Here, I am going to show you some of the formats then I will provide you the link from where you will get all the available data formats.
Step1: Modify app.modules.ts file
Open app.module.ts file and then copy and paste the following code in it. Here we setting AppComponent as our startup file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step2: Modify app.component.ts file
Open app.component.ts file and then copy and paste the following code in it. Here we simply create a variable i.e. today to hold the current data. As you can see you can use Date.now() to get the current date in typescript.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
today: number = Date.now();
}
Step3: Modify app.component.html file
Open app.component.html file and then copy and paste the following code in it. As you can see, here we are using the parameterized data pipe to show different date formats.
<p>Date Pipe : {{today | date}}</p>
<p>Full Date : {{today | date:'fullDate'}}</p>
<p>Mediate Date : {{today | date:'medium'}}</p>
<p>Short Date : {{today | date:'short'}}</p>
<p>Date (dd/MM/yyyy) : {{today | date:'dd/MM/yyyy'}}</p>
<p>Time : {{today | date:'h:mm a z'}}</p>
<p>Medium Time : {{today | date:'mediumTime'}}</p>
Step4: Modify index.html file
Finally open index.html file and then copy and paste the following code in it.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>MyAngularApp</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html>
With the above changes in place nor run the application and you should the date in different formats in the web page as shown in the below image.
Please visit the following link for the complete list of angular date pipes.
https://angular.io/api/common/DatePipe
Currency Pipe:
The Angular Currency Pipe is used to transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations. Let us understand this with an example.
Step1: Modify app.component.ts
Open app.component.ts file and then copy and paste the following code in it. Here, we just created one property of type number.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
salary: number = 456723.50;
}
Step2: Modify app.component.html file
Open app.component.html file and then copy and paste the following code in it.
<p>Currency USD in Symbol : {{salary | currency:'USD':true}}</p>
<p>Currency INR in Symbol : {{salary | currency:'INR':true}}</p>
<p>Currency USD in Code : {{salary | currency:'USD':false:'4.2-2'}}</p>
<p>Currency INR in Code : {{salary | currency:'INR':false:'1.3-3'}}</p>
Let us understand the above code.
- The first parameter is the currency Code (i.e. USD or INR)
- The second parameter is boolean – True to display the currency symbol where as false to display the currency code.
- The third parameter (‘1.3-3’ or ‘4.2-2’) specifies the number of integer and fractional digits.
Now save the changes and have a look at the browser and you should get the following output.
In the next article, I am going to discuss Creating Angular Custom Pipes with examples. Here, in this article, I try to explain Angular Parameterized Pipes in detail. I hope you enjoy this article and understand the concept of Parameterized Pipes.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Registration Open For New Online Training
Enhance Your Professional Journey with Our Upcoming Live Session. For complete information on Registration, Course Details, Syllabus, and to get the Zoom Credentials to attend the free live Demo Sessions, please click on the below links.