Currency Conversation using Angular Custom Pipe

This blog teaches use of custom Pipe in any e-commerce website. In most of the e-commerce website provides multiple currency facility. In any non-angular project, developer has to store price in all currency in database.  in Angular, developer doesn't need to store each price in database, rather it will store only primary currency and fetch the current currency conversation rate and simply convert primary price to desired currency price.

<h1>Products</h1>
<select [(ngModel)]="currency">
  <option value="USD">USD</option>
  <option value="INR">INR</option>
  <option value="AUS">AUS</option>
</select>
<div *ngFor="let p of products">
	<h6>{{p.name}}</h6>
  <h4>{{p.price | currencyConversion : currency}}</h4>
</div>

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currency : string = "USD";
  
  products: Array<any> = [
    {
      id: 1,
      name: "Reebok T-Shirt",
      price: 10,
    },
    {
      id: 2,
      name: "Nike Football",
      price: 12,
    },
    {
      id: 3,
      name: "Play Station",
      price: 300,
    }
  ]
}

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'currencyConversion'
})
export class CurrencyConversionPipe implements PipeTransform {

  transform(value: any, currency: string): any {
    if (currency == "USD") {
      return value + " USD";
    }
    if (currency == "INR") {
      return value * 65 + " INR";
    }
    if (currency == "AUS") {
      return value * 45 + "AUD";
    }
  }
}