Text box loses data on lost focus in angular 6

Question

Input box in one of my form is exhibiting a very strange behavior on lost focus. I have just binded the data using [(ngModel)] with name attribute as follows:

 <input type="text" style="width:30%;" [(ngModel)]="settings[0].propertyValue" name="header" placeholder="Enter Event Title">

Initially, it shows data since the settings variable gets the data from api. But when I change the text in it and press tab, it just overrides with the data from API. Please help me with this since it restricts me from pressing tab, when I'm done editing in the textbox.

Note: This textbox is inside of a one one of my many tabs being used in angular page.

Answer 1

Here, to use a two-way binding, we have to a variable which can be altered from both .ts as well as .html files.

You can achieve this by declaring another global variable say 'eventTitle'.

Put the value of settings[0].propertyValue into eventTitle after you get the response from an API in the .ts file. Then access it within .html file with {{eventTitle}}.