angularjsHow do I use different binding types in AngularJS?
In AngularJS, there are different types of bindings that can be used to bind data to HTML elements. The most commonly used bindings are the {{ expression }}
interpolation binding and the [property]="expression"
property binding.
Interpolation Binding
Interpolation binding is used to display a value from a component class. It is denoted by double curly braces {{ }}
and is used to display a component property value.
<h2>Welcome {{name}}!</h2>
Output example
Welcome John!
Property Binding
Property binding is used to set a property or an attribute of a DOM element. It is denoted by square brackets []
and is used to bind a component property value to a DOM property.
<button [disabled]="isDisabled">Submit</button>
In the above example, the disabled
property of the button will be set to true
or false
depending on the value of the isDisabled
property of the component class.
Event Binding
Event binding is used to bind an event to an event handler. It is denoted by parentheses ()
and is used to bind a component event handler to a DOM event.
<button (click)="onClick()">Submit</button>
In the above example, the onClick()
event handler of the component class will be called when the click
event is triggered on the button.
Two-Way Binding
Two-way binding is used to bind a component property value to a DOM element. It is denoted by square brackets []
and parentheses ()
and is used to bind a component property value to a DOM property and update the component property value when the DOM property value changes.
<input [(ngModel)]="name" />
In the above example, the value of the name
property of the component class will be set to the value of the input
element and the input
element will be updated when the name
property value changes.
Helpful links
More of Angularjs
- How can I become an Angular expert from a beginner level?
- How can I create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...