I'm currently in the process of learning the basics of Angular 6 and TypeScript, and I'm struggling to figure out how to achieve a specific functionality. Essentially, I have a field where users can input a numerical value, and based on that input, I want to dynamically adjust the values in other input fields. I believe I need to implement debounceTime and use 'rxjs', as demonstrated in this tutorial: https://angular.io/tutorial/toh-pt6, but I'm having trouble getting it to work.
For example, if a user enters '100' in the "how much" field, I want the values in Tomek's and Magda's fields to automatically update to '50' (100 / 2).
https://i.sstatic.net/OhQkp.png
expense-shared.component.html
<div class="form-group">
<label for="name">How much?</label>
<input type="text" class="form-control" id="amount" required
[(ngModel)]="expense.amount" (keyup)="changeListValues(expense.amount)"
name="amount" #amount="ngModel" placeholder="Amount in EUR">
<div [hidden]="amount.valid || amount.pristine" class="alert alert-danger">
Amount is required
</div>
</div>
expense-shared.component.ts
@Input() amountList: Equally[];
changeListValues(expenseTotalAmount: number) {
const checkedAmount = this.amountList.filter(x => x.checked).length;
this.amountList.filter(x => x.checked).forEach(element => {
element.quantity = this.expense.amount / checkedAmount;
});
}