bielas bielas - 25 days ago 9
TypeScript Question

ngModel doesn't work properly in Angular 4

I faced a problem with

ngModel
directive. I have an
input
<td><input type="text" ([ngModel])="desc"></td>
in which I assigned value of that
input
to the variable called
desc
. Then in
component
I just want to print it in the console by:

addItem(){
console.log('=======', this.desc);
}


The method
addItem()
is decalred in
html
file below the
input
:

<td>
<i
class="fa fa-plus-square add-button"
(click)="addItem()">
</i>
</td>


The thing which I get back is:
======= undefined
in the console. Can anyone tell me why I got this? In diffrent place of this app I'm also using
ngModel
and everything works good

Answer Source

The syntax of the data-binding operators ( and [ is wrong, if you want dual binding to work properly, you need to remember the famous sentence "Banana in a box" so you need to write [(ngModel)] it's like a banana in a box [()] .

For information, [ is for view to controller binding and ( for the inverse.