Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

`[(ngModel)]` vs `[(value)]`

Tags:

angular

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?

like image 560
Snæbjørn Avatar asked Mar 09 '17 15:03

Snæbjørn


People also ask

What is difference between value and ngModel in Angular?

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.

What is value and ngModel?

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.

What is the difference between ngModel and [( ngModel )]?

The answer is: (ngModel) causes a 1-way data-binding, whereas [(ngModel)] ensures a two-way data binding.

What is ngModel angular10?

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.


1 Answers

  • 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"

like image 170
Günter Zöchbauer Avatar answered Oct 02 '22 10:10

Günter Zöchbauer