Angular Parameterized Pipes

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.

What are Angular Parameterized Pipes?

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.

Data Pipes Examples in Angular Application

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.
  1. The first parameter is the currency Code (i.e. USD or INR)
  2. The second parameter is boolean – True to display the currency symbol where as false to display the currency code.
  3. 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.

Currency Pipes Example in Angular Application

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.

Leave a Reply

Your email address will not be published. Required fields are marked *