Databinding In Angular + String Interpolation + Event Binding +Property Binding + Two-Way-Databinding

Hi All,

Greetings today!

Today, we will go over the following topics in depth with examples.

1. What is data binding in angular?
2. Types of data binding in angular
3. String Interpolation in angular
4. Property Binding in angular
5. Event Binding
6. Two-way data binding in angular

So let's get started.

What exactly is angular data binding? Databinding is the exchange of information between typescript code and a template.

Data-binding use case

• When we use typescript code to call a REST API and want to display the API results to the end user, we need data binding to populate data on a template from typescript code.
• We used typescript code to perform some calculations on the service layer, and we need to use data-binding to display the results to the end user.
• We want to trigger an event on the typescript side when the user clicks a button.

Types of data binding in angular

We can define types of data binding using a way of communication between typescript code and template

1. Output data from typescript code to template
• Property Binding 
• String Interpolation
2. Template to typescript code  [React To User Events]
• Event Binding
3. Combination of 1 & 2
• Two-way data binding [React To Events + Output data to template from typescript code]

Now let's create a sample angular project using the below commands so we can use the project to execute examples of data binding. 

ng new data-binding-example --no-strict

String Interpolation in angular. As previously stated, it is used on the template to display data from the typescript to the end-user.

So, for now, let's add static data to the app.component.ts file, namely luckyNumber with a value of 10, and render that data on the app.component.html file; in reality, we'll have dynamic data based on some logic or as a result of an API call.

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

Now to display the result on the template file we can use string interpolation with syntax as {{variable_name}} in our case it would be {{luckyNumber}}

app.component.html

<p>Your lucky number is {{luckyNumber}} </p>

Now run the project using the ng serve command and you will see o/p on the screen as 

Your lucky number is 10.

Property Binding In Angular --Property binding is a technique for dynamically changing the properties of HTML Elements/Components/Directives.

For example, we want to use backend logic to disable and enable some buttons. As a result, we will set the disabled property value using typescript code.

app.component.html

<button class="btn btn-primary" [disabled]="luckyDrawEnabled">Test Lucky Draw</button>

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

Event Binding In Angular--Event binding is used to respond to a user-initiated event; we can bind some typescript code to execute when any event occurs.

We can bind all events supported by elements, such as button click events.

Example -- We will call some method on the click event of the button 

app.component.html

<p>Your lucky number is {{luckyNumber}} </p>

<button class="btn btn-primary" (click)="onLuckyDrawClick()">Test Lucky Draw</button>

app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { luckyNumber:number=10; onLuckyDrawClick(){ this.luckyNumber=this.luckyNumber*4; } }

Two-Way-Databinding In Angular--Because two-way data binding is a combination of two of property and event binding, the syntax will be a hybrid of the two, i.e. square brackets and parentheses [()].

We can achieve two-way data binding using ngModel & to use ngModel we need to include FormsModule in app.module.ts as shown below.

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,FormsModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

• Once we include FormsModule in app.module.ts we can now use ngModel as shown below.

app.component.ts

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

• Above we have the variable luckyNumber defined and we will update this dynamically using two-way data binding as shown below.

<p>Your lucky number is {{luckyNumber}} </p>

<input type="text" [(ngModel)]='luckyNumber' />

When the user updates the value in the input text box it will automatically update in typescript code also it will be updated in <p> tag where we have used String Interpolation.

So we've gone over data binding in Angular in depth; if you have any questions, please leave them in the comments.

Thanks

Enjoy your learning!