Angular: Data Binding

Miquel Canal

Wednesday 4, January 2017
  • Angular

In the Angular world, the concept of data binding can be translated into communication. It defines the communication between the logic part of a component on a typescript file and the html template which will be rendered on the browser. There are four main types of data binding in an Angular app:

String interpolation

Consists of a basic rendering of data stored in a variable or the returning value of a function.

export class AppComponent {
    headline: string;
    constructor() {
        this.headline = 'Title of the Headline';

// On the template, the output 'title of the Headline' is expected to be rendered

Property Binding

Used for binding property data into a DOM element. The result of the binding will update each time Angular triggers its change detector. In the following snippet, both lines will have the same result:

<img src="{{ logoUrl }}">
<img [src]="logoUrl">            

Event Binding

Allows a component to react to certain events or interactions from the template by executing a certain method defined on the script. The following example triggers the submitForm() method after the user clicks the button.

<button (click)="submitForm()">

List of supported events triggered by Angular on its change detection:


Two-Way Binding

Consists of a combination of Event Biding and Property Biding. It allows instant communication between the view and the model.

<input type="text" name="Name" [(ngModel)]="username">

<p>Your Name is: {{username}}!</p>

The previous example binds the value of an input to a component property named username. Then, it uses String Interpolation to render the value of that property inside a < p > element. When a user types on the input the value of username will change and the output text will change in 'real-time'.

In order to make use of the Two-Way Binding sintax, the ngModel directive must be enabled first. Do so by importing the module @angular/forms in the main app.module.ts file. Then add the FormsModule into the imports[] inside you AppModule.

import { FormsModule } from '@angular/forms';

@NgModule( {
    imports: [
} )
Angular: ViewChild and Local References

Angular: ViewChild and Local References

Access DOM elements directly using viewChild and Template Reference Variables.

TypeScript Models

TypeScript Models

Basic overview of the TypeScript and ECMAScript 6 models. An example of use case to exemplify the use of models in external classes.

How to compile Angular into single bundle.

How to compile Angular into single bundle.

Steps to compile an Angular application into a single bundle. An overview of the types of Angular compilation bundles and ways to cache bust an Angular application.

This site uses cookies to ensure a great experience. By continue navigating through the site you accept the storage of these cookies.