Yogesh Chauhan's Blog

Introduction to components and templates Part 3: Data binding

in Angular on May 10, 2020

Previous Articles:

Introduction To Components And Templates Part 1: Component Metadata

Introduction To Components And Templates Part 2: Templates And Views

Introduction to components and templates Part 3

Without a framework, you would be responsible for pushing data values into the HTML controls and turning user responses into actions and value updates.

Writing such push and pull logic by hand is tedious, error-prone, and a nightmare to read, as any experienced front-end JavaScript programmer can attest.

Angular supports two-way data binding, a mechanism for coordinating the parts of a template with the parts of a component.

Add binding markup to the template HTML to tell Angular how to connect both sides.

The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.

four forms of data binding markup in Angular
four forms of data binding markup in Angular

This example from the HeroListComponent template uses three of these forms.

//src/app/hero-list.component.html (binding)

<app-hero-detail [hero]="selectedHero"></app-hero-detail>
<li (click)="selectHero(hero)"></li>

1. The {{hero.name}} interpolation displays the component’s hero.name property value within the li element.

2. The [hero] property binding passes the value of selectedHero from the parent HeroListComponent to the hero property of the child HeroDetailComponent.

3. The (click) event binding calls the component’s selectHero method when the user clicks a hero’s name.

Two-way data binding (used mainly in template-driven forms) combines property and event binding in a single notation.

Here’s an example from the HeroDetailComponent template that uses two-way data binding with the ngModel directive.

src/app/hero-detail.component.html (ngModel)

<input [(ngModel)]="hero.name">

In two-way binding, a data property value flows to the input box from the component as with property binding.

The user’s changes also flow back to the component, resetting the property to the latest value, as with event binding.

Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components.

Recall this diagram from the post A Complete Diagram With Building Blocks Of An Angular Application

A Complete Diagram With Building Blocks Of An Angular Application
A Complete Diagram With Building Blocks Of An Angular Application

Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.

Data binding in Angular
Data binding in Angular

Next article:

Introduction To Components And Templates Part 4: Pipes And Directives

Credit: Angular.io

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to replace HTML lists using CSS Counters?CSSSolution for “Yarn build: Failed because of a stylelint error”WordPressAdd animated hamburgers menu using Hamburgers collection on GitHubCSSLearn to Implement Estimated Reading Time using PHP Part 2: Final Implementation with Source CodePHPfirst-of-type and last-of-type selectors in CSSCSSFile System Integrity: How to Keep an Eye on Your Files and Folder Change?Miscellaneous