[SOLVED] Angular how can I prevent the ngif update?

Angular how can I prevent the ngif update?

I have an object with many properties. I have a site where all those properties are listed with an input field connected via [(ngModel)] to the object. On those fields I have an *ngIf="isEmpty(propKey)" that checks if the propertie is empty.

I only want to show every property that currently doesn't has any value. The problem is as soon as I start to type in the input field, the field disappears because the property now has a value by pressing the first button on the keyboard. But I want to write more to it and not just a single char.

Is there a way that I can manually trigger the condition in the ngIf so I can update what properties are shown after I press my save button?

Solution

You can configure the input's ngModelOptions to update the model on blur or submit.

<input 
  [(ngModel)]="myObject[prop.key]"
  [ngModelOptions]="{ updateOn: 'blur' }"
/>

Here's a StackBlitz demo.