42 lines
2.2 KiB
HTML
42 lines
2.2 KiB
HTML
<div class="converter-container" fxLayout="column" fxLayoutGap="25px">
|
|
<mat-card>
|
|
<mat-card-content>
|
|
<form [formGroup]="currencyConverterForm" fxLayout="row" fxLayoutAlign="space-evenly center"
|
|
(ngSubmit)="convert()" novalidate>
|
|
<mat-form-field appearance="outline">
|
|
<input matInput placeholder="Amount" id="amount" [formControlName]="formNames.Amount" type="number">
|
|
</mat-form-field>
|
|
<mat-form-field appearance="outline">
|
|
<input type="text" placeholder="From" name="fromCurrency" aria-label="From" matInput [formControlName]="formNames.FromCurrency"
|
|
(keydown.enter)="selectCurrencyFromInput($event, formNames.FromCurrency)" [matAutocomplete]="fromAutocomplete">
|
|
<mat-autocomplete #fromAutocomplete="matAutocomplete">
|
|
<mat-option *ngFor="let fromItem of filteredFromCurrencies | async" [value]="fromItem">
|
|
{{fromItem}}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|
|
<div class="converter-btn">
|
|
<button type="button" mat-icon-button class="reverse-btn" color="accent" (click)="swapCurrencies()"
|
|
aria-label="Swap currencies">
|
|
<mat-icon>compare_arrows</mat-icon>
|
|
</button>
|
|
</div>
|
|
<mat-form-field appearance="outline">
|
|
<input type="text" class="uppercase" placeholder="To" aria-label="To" matInput [formControlName]="formNames.ToCurrency"
|
|
(keydown.enter)="selectCurrencyFromInput($event, formNames.ToCurrency)" [matAutocomplete]="toAutocomplete">
|
|
<mat-autocomplete #toAutocomplete="matAutocomplete">
|
|
<mat-option *ngFor="let toItem of filteredToCurrencies | async" [value]="toItem">
|
|
{{toItem}}
|
|
</mat-option>
|
|
</mat-autocomplete>
|
|
</mat-form-field>
|
|
<div class="converter-btn">
|
|
<button type="button" mat-raised-button color="accent" (click)="convert()">Convert</button>
|
|
</div>
|
|
</form>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
<app-conversion-details *ngIf="result" [amount]="amount" [result]="result" [fromCurrencyRate]="fromCurrencyRate"
|
|
[toCurrencyRate]="toCurrencyRate"></app-conversion-details>
|
|
</div>
|