Hello Devs, 

In this tutorial, we will learn Angular Use Pipe in Component Ts File Example

We will use angular pipe in component file and you can use in angular 6, angular 7, angular 8 and angular 9 application.

Follow this step by step guide below. 



We will see two example as following bellow:

  1. Angular Use DatePipe in Component
  2. Angular Use Currency Pipe in Component


Example: Angular Use DatePipe in Component


src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

  

import { AppComponent } from './app.component';

  

import { DatePipe } from '@angular/common';

  

@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ],

  providers: [ DatePipe ]

})

export class AppModule { }


src/app/app.component.ts

import { Component } from '@angular/core';

import { DatePipe } from '@angular/common';

   

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

   

  constructor(private datePipe: DatePipe) {

    var date = Date.now();

    var newDate = this.datePipe.transform(date, 'MM/dd/yyyy');

    console.log(newDate);

  }

}


Example: Angular Use Currency Pipe in Component


src/app/app.module.ts

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

  

import { AppComponent } from './app.component';

  

import { CurrencyPipe } from '@angular/common';

  

@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ],

  providers: [ CurrencyPipe ]

})

export class AppModule { }


src/app/app.component.ts

import { Component } from '@angular/core';

import { CurrencyPipe } from '@angular/common';

  

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular';

  

  constructor(private currencyPipe: CurrencyPipe) {

  

    var newCurrency = this.currencyPipe.transform(500, 'USD');

  

    console.log(newCurrency);

  }

}


May this example help you.