I'm trying to prevent triplicate values and handling the logic in parent component. However, it successfully prevents 3rd value once, but not subsequent times. The problem is when setting value on array, it is not updating child component. I'm trying to understand why it is not behaving the same way on subsequent times...
Add a comment
|
1 Answer
The problem is that there is no change in the Input property the second time onwards.
You are reassiging the same value (i.e., empty string literal oValues[oNumber] = '';) to the property in your array.
e.g. for oValues[3]
First change: Previous value = '2', new value = ' '
Here Angular change detection detects the change on the Input property.
Second change: Previous value = ' ', New value = ' '
Here Angular change detection does not detect a change in the value of the Input property.
So basically Angular change detection triggers only if it finds a change in the Input property's value.
5 Comments
IsmailS
Ok. So if it is not detecting any change, why is it making changes to the DOM i.e. updating the value in the text box? Shouldn't it leave that as blank?
Murtaza A
No, because you are entering a value in the textbox and then passing the same on the change event using
Output() to the parent component. You have to explicitly clear the textbox if you want the value only to be updated using Input().Murtaza A
Also,
event.preventDefault() is not working because, change event is not cancellable. stackoverflow.com/questions/24251955/….IsmailS
No, because you are entering a value in the textbox and then passing the same on the change event using Output() to the parent component. You have to explicitly clear the textbox if you want the value only to be updated using Input(). I'm unable to understand this explanation. Because, if it is has not detected change in the model, it shouldn't update the UI/DOM also.Murtaza A
Where are you restricting the DOM update? Your DOM is updated as soon as you enter the value in the textBox. The reason it works for the first time is that the
@Input value changes based on your logic in the parent component. Your child component's @Input receives a new value, and it updates the DOM again. Again being the keyword here. When @Input does not receive a new value, the DOM is not updated and you see the value that you entered in the first place.