What is Data Binding?
Data binding is a process that creates a link between the application’s user interface and data. When the values of the data change, the elements of the user interface are linked to the data. Angular handles data binding by synchronizing the state of the view, with the data in the component.
Data-binding can be one-way, where a change in the state affects the view, or two-way, where a change from the view can also change the model.
The following types of bindings are supported by Angular:
- Interpolation
- Property Binding
- Event Binding
- Two-way binding
What is Angular Interpolation?
Interpolation is a one-way data binding method that is commonly used in angular templates. Data flows from controller to template.
String Interpolation uses template expressions in double curly {{ }} braces to display data from the component, the special syntax {{ }}, also known as moustache syntax. The text between the moustache braces is a template expression that Angular first evaluates and then converts to a string.
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{variableWithValue4}}</p>What is Property Binding?
Another one-way data binding method in Angular is Property Binding. Property binding is used to bind values to the DOM properties of the HTML elements. Data flows from controller to template. Square brackets around the property indicates that the text assign to it will be evaluated and converted to string.
<span [title]="titleTextVariable">This span has a dynamic title...</span> <span bind-title="titleTextVariable">This span has a dynamic title...</span>
Data in titleTextVariable will be converted to a string and assigned to the element as its title. Any change in titleTextVariable will trigger an update in Dom to reflect the latest title.
What is Event Binding?
User actions such as clicking a link, pushing a button, and entering text raise DOM events. You can use Angular event bindings to respond to these DOM events. Event binding is a one-way data binding method where data flows from template to controller in contrast to previous 2 methods.
To bind to a DOM event, surround the DOM event name in parentheses and assign a quoted template statement to it.
<button (click)="onClickMeFunction()">Click me!</button> <button on-click='onClickMeFunction()'>Click me!</button>
Clicking on either of the buttons will result in invocation of the function named onClickFunction.
What is Two-Way Binding?
The feature two-way binding in Angular is derived from the property and event bindings. The property and event bindings are directed one way with the former receiving data into template from the controller and the later sending data from the template to the controller. The two-way binding is a combination of these two bindings; it gets the data from the controller to the template and sets the data from template to the controller.
There’s one directive in Angular that implements two-way data binding: ngModel. The property binding [ngModel] takes care of updating the underlying input DOM element. The event binding (ngModelChange) notifies the outside world when there was a change in the DOM. Angular allows the shorthand syntax, also called “Banana in a box”, using [(ngModel)] which is combination of property and change event binding of ngModel.
<input [ngModel]="username" (ngModelChange)="username = $event">
<input [(ngModel)]="username">
<p>Hello {{username}}!</p>When typing into any of the inputs, the input’s value is written into the username model and then reflected back into the view, resulting in a nice greeting.
What is the use of @Input and @Output?
When it comes to the communication of Angular Components, which are in Parent-Child Relationship; we use @Input in Child Component when we are passing data from Parent to Child Component and @Output is used in Parent Component to receive an event from Child to Parent Component.