Input fields updates when mouse is over

Question

I made an angular 2 model-driven form with nested fields. One of this fields is a numeric field and I am using a jquery plugin to make numeric formatted. I created a directive to init this plugin when a new line of input are added, but when I add a new line, a total must be divided to all lines, it's a quantity. This division I made in a function in my model to update the fields in the formGroup.

My problem is, the view shows the new value for each line, but, the plugin is formatting this field and the browser only shows the field formatted when I put the mouse cursor over. It seems that angular is not updating the view as it should.

Here are some images about whats happening:

First when the layer appears, the first field in the top is not showing formatted, but it's.

Here is how it shows after moving the mouse over:

I added some lines, see how they are shown:

And after moving the mouse over:

Ps: Don't tell me "you should not use jquery with angular blah blah blah...". I know this, but I needed to use it.

Answer 1

My best guess is the changes you're making is made outside Angular hence its change detection engine is not aware of the changes. One simple way to force this is using setTimeout

setTimeout(() => {
  // Code that modify model values go here
})