Detect focus lost from different input in Angular 8?

Question

I have 2 inputs, one of them has a numeric value on it:

<input matInput class="form-control"
                [(value)]="row.value"
                ([ngModel])="row.value">

The second input calculates that value -20€ value.

<input matInput class="form-control"
                value="{{ row.value - 20 | round }}"
                ([ngModelChange])="row.value">

And I also apply a round filter. The result is this:

When I change the value on the first input (column Retail value), I would like to be able to capture it from the second input (Total cost) and recalculate it. The most angularish way possible.

So my question is:

What is the best Angularish way to do this?

Edit: I should have said that my inputs are located insidte a material table:

<mat-table [dataSource]="dataSource" class="table">
    <ng-container matColumnDef="value">
       <mat-header-cell *matHeaderCellDef > Retail Value </mat-header-cell>
       <td mat-cell *matCellDef="let row">
          <input matInput class="form-control"
                [(value)]="row.value"
                ([ngModel])="row.value"
                (ngModelChange)="updateTotal(row)">
       </td>
    </ng-container>
    <ng-container matColumnDef="value">
       <mat-header-cell *matHeaderCellDef > Retail Value </mat-header-cell>
       <td mat-cell *matCellDef="let row">
          <input matInput class="form-control"
                [(value)]="row.total">
       </td>
    </ng-container>
</mat-table>

And my .ts function:

updateTotal(row: RepairItem) {
   row.total = row.value - row.discount;
}

on the first input and then make a calculation on typescript? That's the most Angularish? — Sonhja, Feb 25 '20 at 16:00

Kurt Hamilton · Accepted Answer · 2020-02-25T16:56:35.350

3

You are currently 2-way binding the input value to your model using [(ngModel)]. To listen to value changes you can handle (ngModelChange) events.

component.html

<input matInput class="form-control"
                [(ngModel)]="row.value"
                (ngModelChange)="onModelChange(row)">

component.ts

onModelChange(row) {
  // row.value has been updated to the new value
  // you also have a reference to the original row, 
  //   should you need to do anything with it
  console.log(row.value);
}

edited Feb 25 '20 at 16:56

answered Feb 25 '20 at 16:14

Kurt Hamilton

12,490
1
24
40

Okay gonna update my question as it's a bit more complex as my inputs are inside a material table... – Sonhja Feb 25 '20 at 16:16
Why does it make it more complex? Excuse my ignorance - I don't use Material. – Kurt Hamilton Feb 25 '20 at 16:33
Because I'm generating dynamic rows for the tables. And each row is binded as the example before. Gonna check your example anyways because it should work somehow. – Sonhja Feb 25 '20 at 16:39
Just had a look at `matInput`. Firstly: I'm going to remain far away from Material. Secondly: looks like you need to look into how you work with material forms. You should use one of `matInput` or `[(ngModel)]` - the 2 aren't compatible. I created a very simple demo using `[(ngModel)]` https://stackblitz.com/edit/angular-4usmfi – Kurt Hamilton Feb 25 '20 at 17:08

Detect focus lost from different input in Angular 8?

1 Answers1