publication

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
<h1>{{headline}}</h1>

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:

(focus)='method()'
(blur)='method()'
(submit)='method()'
(scroll)='method()'
(cut)='method()'
(copy)='method()'
(paste)='method()'
(keydown)='method()'
(keypress)='method()'
(keyup)='method()'
(mouseenter)='method()'
(mousedown)='method()'
(mouseup)='method()'
(click)='method()'
(dblclick)='method()'
(drag)='method()'
(dragover)='method()'
(drop)='method()'

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'.

Important!
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: [
        AppModule
    ]
} )
            
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.

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.

Angular: ViewChild and Local References

Angular: ViewChild and Local References

Access DOM elements directly using viewChild and Template Reference Variables.

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