YogeshChauhan.com
Introduction to components and templates Part 3: Data binding
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

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript

You might also like these

How to display modal from bottom to top using CSS and JavaScript?CSSAttributes and Properties in JavaScript and HTMLHTMLThe Differences Between HAVING Clause and WHERE Clause in SQLSQL/MySQLURL paths in DrupalDrupalSpecificity of attribute selectorsCSSKeyValuePipe in Angular 9Angular