Angular 10 - Data Binding

Data binding is a core concept in Angular and sanctions to define communication between a component and the DOM, making it very facile to define interactive applications without worrying about pushing and pulling data. 

It has mainly two components:

HTML Template

It contains a view for the component (HTML elements: input, select, button, etc.)

Component Class

It contains logic for a component like classes, variables, functions, API calls, etc. The interaction between the HTML template and component class can be done through data binding.

There are four forms of data binding and they differ in the way the data is flowing.

Types of Data Binding:

  1. String Interpolation
  2. Property binding
  3. Event Binding
  4. Two Way Data Binding
Data binding can be one-way data binding or two-way data binding.


One-way databinding

One way databinding is a simple one-way communication where HTML template is changed when we make changes in TypeScript code.

From the Component to the DOM

Interpolation: {{ value }}

This adds the value of a property from the component:
<li>Name: {{ employee.name }}</li>
<li>Email: {{ employee.email }}</li>

Property binding: [property]=“value”

With property binding, the value is passed from the component to the designated property, which can often be a simple HTML attribute:
<input type="email" [value]="employee.email">

From the DOM to the Component

Event binding: (event)=“function”

In Angular, event binding is utilized to handle the events raised by the utilizer actions like button click, mouse kineticism, keystrokes, etc. When the DOM event transpires at an element(e.g. click, keydown, keyup), it calls the designated method in the particular component.
<button (click)="sendMail()"></button>

Two-way

Two-way data binding: [(ngModel)]=“value”


Two-way data binding sanctions having the data flow both ways. Here, the employee.email data property is utilized as the value for the input, but if the employee transmutes the value, the component property gets updated automatically to the incipient value:
<input type="email" [(ngModel)]="employee.email">

More...


Popular posts from this blog

Learn Java 8 streams with an example - print odd/even numbers from Array and List

Spring boot video streaming example-HTML5

Spring Boot + Mockito simple application with 100% code coverage

Spring Boot + OpenCSV Export Data to CSV Example

Custom Exception Handling in Quarkus REST API

Registration and Login with Spring Boot + Spring Security + Thymeleaf

DataTable-Pagination example with Spring boot, jQuery and ajax

Spring Webflux File Download - REST API Example

Node JS mini projects with source code - free download

ReactJS, Spring Boot JWT Authentication Example