ngModel doesn't work properly in Angular 4

Issue

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

Solution

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.