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 do I use Angular to zip files?
- How can I use Angular to zoom in and out of a div?
- How can I use an Angular YouTube Player in my software development project?
- How do I reload a component in AngularJS?
- How can I use AngularJS and Kendo UI together to develop a web application?
- How can I use Zone.js with Angular to detect and act upon asynchronous events?
- How can I use AngularJS to create a zone in my software development project?
- How do I implement one-way binding in AngularJS?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular with YAML?
See more codes...