Angular 11 Data, Event, Property Binding Examples Tutorial

Data binding is the primary topic in the unbound world of Angular; on top of that, it makes the communication possible between the component and the view. Data binding is transferred from the angular component to DOM (Document Object Model) and similarly from view to the component.

In this comprehensive tutorial, you will learn the profound concepts of data binding along with that. You will get the answers for following questions such as what data binding does is and the event types with angular data binding examples.

Needless to say, but In this detailed tutorial, we will immaculately discuss the four foundational concepts of Angular data binding. We are sure after completing this post, and you will have innumerable knowledge of data binding in angular application development:

  • Event Binding
  • String Interpolation
  • Property Binding
  • Two Way Data Binding

Let’s ascertain every data binding type one by one:

Event Binding

Event binding is the process that lets you respond to the action taken by the user in the form of a click, keystroke, mouse in, mouse out, touch or hovers over an object.

Angular Event Types List

In the angular application, you have to bind an event with angular event binding syntax. Usually, defining an event is simple you need to define the target event name along with the parentheses, we have conjugated angular event types list given below.

(click)="functionName()"      
(dblclick)="functionName()"   

(submit)="functionName()"

(blur)="functionName()"  
(focus)="functionName()" 

(scroll)="functionName()"

(cut)="functionName()"
(copy)="functionName()"
(paste)="functionName()"

(keyup)="functionName()"
(keypress)="functionName()"
(keydown)="functionName()"

(mouseup)="functionName()"
(mousedown)="functionName()"
(mouseenter)="functionName()"

(drag)="functionName()"
(drop)="functionName()"
(dragover)="functionName()"

Angular Event Binding Example

Here is the quick event example in which we showed how to bind a click event in angular:

<button (click)="functionName()">Click</button>
export class AppComponent {

  functionName() {
    alert('Hello');
  }

}

String Interpolation

String interpolation in Angular is another paradigm in Angular which offers one-way data dining. It allows the angular template to receive data from the TypeScript template. You can effortlessly show data dynamically in angular HTML template (view).

Angular String Interpolation Example

Checkout uncomplicated string interpolation example in angular:

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

@Component({  
    selector: 'ng-app',  
    template: `  
               <h2> {{ amazon }} </h2>
              `  
})

export class NgComponent {

    amazon: string = 'The Boys';

} 

Property Binding

Property binding in Angular is a way to define values for HTML properties and directives; scilicet, you can define dynamic paths, add button toggle, and share various values between components.

Angular Property Binding Example

Here is the simple angular property binding demo:

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

@Component({  
    selector: 'ng-app',  
    template: `  
              <img [src]="itemImageUrl">
              `  
})

export class NgComponent {

   imagePath = '../assets/homelander.jpg';

} 

Property Binding

Property binding in Angular is a way to define values for HTML properties and directives; scilicet, you can define dynamic paths, add button toggle, and share various values between components.

Angular Property Binding Example

Here is the simple angular property binding demo:

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

@Component({  
    selector: 'ng-app',  
    template: `  
              <img [src]="itemImageUrl">
              `  
})

export class NgComponent {

   imagePath = '../assets/homelander.jpg';

} 

Two-way data binding

Lastly, we will ascertain about Two-way data binding in angular. It merely means sharing data amid angular template and component class. Two-way data-binding refers to changing a value at one place updates the value for the defined property.

Angular Two-way Data Binding Example

This simple example will show you how to invoke two way data binding in angular:

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

@Component({  
    selector: 'ng-app',  
    template: `  
        <input type="text" [(ngModel)]="name"  > <br/> {{name}}
              `  
})

export class NgComponent {

   name: string = "Star Light";

} 

Conclusion

Theoretically and practically throughout this tutorial, we discussed data binding, event binding, explored the event types, property binding examples. I hope this tutorial will help sharpen your angular skills.