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




Popular posts from this blog

Spring boot video streaming example-HTML5

DataTable-Pagination example with Spring boot, jQuery and ajax

10 Best Job Posting Sites 2021-2022

Spring boot web project free download:User Registration System

Spring Boot + JPA/Hibernate One to Many mapping example

5 Hardest Puzzle,100% fail answers

Java security AES,SHA256,SHA512,MD5-Spring Boot Project Free Download

Spring Boot-AngularJS-Bootstrap-JPA-CRUD

ReactJS - Bootstrap - Buttons

Spring Boot file upload/download example