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: [
} )
Create Angular Component after Application Initializes

Create Angular Component after Application Initializes

Basic learning of how to use build-in tools provided by Angular in order to create components after an application has been loaded.

Angular: ViewChild and Local References

Angular: ViewChild and Local References

Access DOM elements directly using viewChild and Template Reference Variables.

Angular: Routing

Angular: Routing

Understand the basics of Angular routing and review core concepts and internal architecture.

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