Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Angular 4 Tutorial: Understanding the Data Bindings

Hello everyone, as you know this post is part of the free tutorial series of Angular 4 from scratch, and if not, check out the http://mytechthinking.in/2017/07/30/angular-4-tutorial-from-scratch/ . In the previous post, http://mytechthinking.in/2017/08/09/angular-4-understanding-the-basics/ we learned about the components in Angular 4. In this post, we will learn about the data bindings in Angular 4.

Introduction

Data binding is the interaction between the template i.e. the HTML and business logic i.e. typescript code. It can be from both the end i.e. from HTML to Typescript and vice versa. From Typescript to HTML it can be done via two ways, Interpolation and Property Binding. Whereas Event Binding can be used by HTML elements to communicate with Typescript code. Let’s understand the bindings in details with examples.

Interpolation

Interpolation is to display the value of any basic type variable to HTML code. This is achieved by using the pair of double curly brackets i.e. {{}}. The Angular replaces the variable with the value of the variable at run time. Interpolation supports displays value of only basic data types of typescript. As in the below example, you can see how it works.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 thisIsString: String = 'I am an example of string interpolation';
 thisIsNumber: Number = 4;
}

String : {{thisIsString}} Number : {{thisIsNumber}}

Angular - 4 interpolation

Property Binding

Property binding is tied up the attributes of HTML elements to the typescript variable. In other words, it helps to change the attributes of HTML element dynamically. In Angular 4 pair of square brackets i.e. [], is used to bind any attribute with a variable.

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  disableButton = true;
}

angular-4-property-binding

In the above example as you can see the attribute disabled value is changed on the basis of disableButton variable value. Angular removes the attribute disable from button element when the boolean value is false.
Event Binding

Event binding is to set up the communication from the template to the typescript. Event binding is to execute a block of code on a particular event for e.g. onclick of the button, on hover etc. To bind a particular event of an HTML element we use brackets i.e. () inside which we mention the event name. We can call the function on the occurrence of the event or write the code there itself in the template. But it is advisable to call the function as it is always better to keep the business logic out of the template. Let’s see an example:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  disableButton = true;
  buttonStatus = 'No button is clicked';
  onButtonClick() {
    this.buttonStatus = 'Button was clicked';
  }
}


{{buttonStatus}}

 event-not-clickedevent-on-clicked
As in the above example, we can see the text was changed on click of the button. Also, we can see instead of onclick we have used click for event name, that we should take care as Angular understands click keyword for event binding and not the onclick keyword.


This post first appeared on Mytechthinking.in, please read the originial post: here

Share the post

Angular 4 Tutorial: Understanding the Data Bindings

×

Subscribe to Mytechthinking.in

Get updates delivered right to your inbox!

Thank you for your subscription

×