67

What is the difference between

<input [(ngModel)]="name">

and

<input [(value)]="name">

They appear to do the same thing.

The angular docs are using NgModel but they also say that they replace all the angular1 directives with the "boxed banana" [()]. So why is NgModel still around?

What am I missing?

Snæbjørn
  • 10,322
  • 14
  • 65
  • 124

1 Answers1

97
  • ngModel is a directive that allows your input to participate in a form (but works also without a form)
  • value is a property you can bind a value to with [value]="name" while (valueChange)="..." doesn't work, because the <input> element doesn't have an @Output() valueChange; therefore [(value)]="..." is invalid.

[(ngModel)]="name" is the shorthand for [ngModel]="name" (ngModelChange)="name = $event" as is [(value)]="name" for [value]="name" (valueChange)="name = $event"

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • you mean we cant catch ValueChanged(VALUE) when using [(value)]="VARIABLE" ? – Ali.Rashidi Jul 26 '21 at 09:08
  • 1
    That's right, because there is no `valueChange` event. There is a `value` property and a `change` or `input` event, depending on the input element, so you would need to use `[value]="value" (change)="value = $event"` (or `input` instead of `change`) to get a similar result. – Günter Zöchbauer Jul 26 '21 at 14:15