app.component.

html
-------------------------
<form>
<label for="fromCurrency">Source CCY:</label>
<select [(ngModel)]="fromCurrency" id="fromCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
<br>
<br>
<label for="toCurrency">Target CCY:</label>
<select [(ngModel)]="toCurrency" id="toCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
<option value="INR">INR</option>
</select>
<br><br>
<label for="amount">Amount (Rs):</label>
<input type="number" [(ngModel)]="amount" id="amount">
<br>
<br>
<button (click)="submit()">Submit</button>

<div id="resValue">
{{ amount | convertCurrency:fromCurrency:toCurrency }} {{ toCurrency }}
</div>

</form>

app.component.ts
----------------------

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

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

@Pipe({
name: 'convertCurrency'
})
export class ConvertCurrencyPipe implements PipeTransform {

exchangeRates = {
USD: 1.126735,
GBP: 0.876893,
INR: 79.677056
};

transform(amount: number, fromCurrency: string, toCurrency: string): number {

const fromRate = this.exchangeRates[fromCurrency];
const toRate = this.exchangeRates[toCurrency];
return amount * (toRate / fromRate);
}
}

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
fromCurrency = 'USD';
toCurrency = 'GBP';
amount = 100;

submit() {
// Do something when the form is submitted
console.log('Form submitted with values:');
console.log(`fromCurrency: ${this.fromCurrency}`);
console.log(`toCurrency: ${this.toCurrency}`);
console.log(`amount: ${this.amount}`);
}
}

app.module.ts
_______________

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 { }