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)

<li>{{hero.name}}</li>
<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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
How to create a simple stopwatch using JavaScript?JavaScriptLearn how to use Self JOIN in SQL and MySQLSQL/MySQLKilling A Project Part 1: What criteria should be used to cancel/kill a project?MiscellaneousHow to Pop an Alert Box in PHP?JavaScriptWordPress: How to get ACF field values from another post?WordPressuser_can vs current_user_can in WordPressWordPress