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:

    console.log('=======', this.desc);

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

              class="fa fa-plus-square add-button"

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


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.

Answered By – Mehdi Benmoha

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.