Can someone help me figure out how to assign a variable to a value inside an object in an Observable in my typescript file? I can retrieve the variable's value in my HTML file, but I seem to be missing something crucial. I believe the solution may involve two-way binding, but I haven't been able to get it working. Any assistance would be highly appreciated. Here is the code snippet:
import { Component, OnInit } from '@angular/core';
import { AppState } from '../store';
import { State, Store } from '@ngrx/store';
import { NgForm } from '@angular/forms';
import * as fromCurrencies from '../store/actions/currencies.actions';
import { Currency } from '../Models/currency';
import { Observable } from 'rxjs';
import * as fromSelectors from '../store/selectors/currencies.selectors';
import { selectCurrency } from '../store/selectors/currencies.selectors';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit {
constructor(private store: Store<AppState>) {}
public currency$: Observable<Currency>;
public conversionRate: number;
public convertedAmount: number;
ngOnInit(): void {}
OnSubmit(form: NgForm) {
console.log('currency: ' + form.value.symbol);
this.store.dispatch(
fromCurrencies.findCurrency({
symbol: form.value.symbol,
})
);
this.currency$ = this.store.select(fromSelectors.selectCurrency);
this.convertedAmount = form.value.amount * this.conversionRate;
}
}
The interface:
id: number;
symbol: string;
name: string;
conversionRate: number;
}
I need to set the value of the conversionRate within the Currency object to the variable conversionRate in the typescript file. I also have the related HTML code where I can retrieve the value.
<div>
<form #form="ngForm" (ngSubmit)="OnSubmit(form)">
<div class="currency-type">
<label for="symbol">Symbol</label>
<input
type="text"
name="symbol"
ngModel
required
id="symbol"
class="form-control"
placeholder="enter symbol"
/>
</div>
<div>
<label for="amount">Amount (€): </label>
<input
type="number"
name="amount"
ngModel
required
id="amount"
class="form-control"
placeholder="enter amount"
/>
</div>
<button
type="submit"
[disabled]="form.invalid"
class="btn btn-primary btn-lg btn-block"
>
<span>Calculate Currency</span>
</button>
</form>
</div>
<table *ngIf="currency$ | async as currencyInfo">
<thead>
<tr>
<th>Symbol</th>
<th>Name</th>
<th>Conversion Rate</th>
<th>Amount (Euro)</th>
</tr>
</thead>
<tr *ngFor="let curr of currencyInfo">
<td>{{ curr.symbol }}</td>
<td>{{ curr.name }}</td>
<td>{{ curr.conversionRate }}</td> //value I want to assign in ts file
<td>{{ conversionRate }}</td>
</tr>
</table>
Edit: I managed to resolve this issue by incorporating a for loop inside the table within the form. This allows me to define a select tag equal to the value. Below is the updated HTML code:
<div *ngIf="currency$ | async as currencyInfo">
<form #form="ngForm" (ngSubmit)="OnSubmit(form)">
<div class="currency-type">
<label for="symbol">Symbol</label>
<input
type="text"
name="symbol"
ngModel
required
id="symbol"
class="form-control"
placeholder="enter symbol"
/>
</div>
<div>
<label for="amount">Amount (€): </label>
<input
type="number"
name="amount"
ngModel
required
id="amount"
class="form-control"
placeholder="enter amount"
/>
</div>
<div>
<label>Conversion Rate:</label>
<select
*ngFor="let curr of currencyInfo"
name="rate"
type="number"
id="rate"
ngModel
class="form-control"
value="{{ curr.conversionRate }}"
id="rate"
>
<option>
{{ curr.conversionRate }}
</option>
</select>
</div>
<button
type="submit"
[disabled]="form.invalid"
class="btn btn-primary btn-lg btn-block"
>
<span>Calculate Currency</span>
</button>
</form>
</div>
<table *ngIf="currency$ | async as currencyInfo">
<thead>
<tr>
<th>Converted Amount</th>
</tr>
</thead>
<tr *ngFor="let data of currencyInfo">
<td>{{ convertedAmount }}</td>
</tr>
</table>