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?
Use [value] when you are binding to a string value and only a string value. Or you need access to the option value inside the HTML for automation purposes. Use [ngValue] when you are binding to any type and/or you want the entire option bound instead of just a string.
The ngmodel directive binds the value of HTML controls (input, select, textarea) to application data. We can merely achieve it in the component element and the HTML element both. The two-way binding uses the syntax as [()] or bind- keyword.
The answer is: (ngModel) causes a 1-way data-binding, whereas [(ngModel)] ensures a two-way data binding.
The ngModel is a built-in directive and is part of the FormsModule. The Two-way binding uses the syntax [()] Applies to: Angular 2 to the latest edition of i.e. Angular 8. Angular 9, Angular 10, Angular 11, Angular 12, Angular 13, Angular 14.
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With