Angular 2 - ContentEditable 2 way binding - Updates after second onBlur() event

Question

I have a table that has price, quantity and total. I added a 'contenteditable' attribute to the price and quantity fields and I want it to automatically update the 'total' field when either price or quantity has changed. (I am using a modified contenteditable component from this post)

<table>
    <tr>
        <td>Price</td>
        <td>Quantity</td>
        <td>Total</td>
    </tr>
    <tr>
        <td (blur)='edit()' contenteditable='true' [(contenteditableModel)]='price'>{{price}}</td>
        <td (blur)='edit()' contenteditable='true' [(contenteditableModel)]='quantity'>{{quantity}}</td>
        <td>{{total}}</td>
    </tr>
</table>

In my app.ts, I have an edit() function defined that does the calculation.

  edit() {
    this.total = this.price * this.quantity;
  }

However, total doesn't update until the onBlur is executed a second time. Why is that?

Here is a plunker link:

https://plnkr.co/edit/1cxQLXZTRmCTPCdFUUk6

Answer 1

Your blur handler on the parent component is executed earlier than the handler within ContenteditableModel directive.

You need to update the total after executing child handler:

 <td [contenteditableModel]="price" 
     (contenteditableModelChange)="price = $event; updateTotal()"
     contenteditable="true">{{price}}</td>
 <td [contenteditableModel]="quantity"
     (contenteditableModelChange)="quantity = $event; updateTotal()" 
     contenteditable="true">{{quantity}}</td>

Plunker