Angular Databinding Tutorial: A Comprehensive Guide with Examples

Databinding is one of the key features that make Angular such a powerful framework for building dynamic web applications. In this tutorial, we’ll dive into Angular 7 databinding and explore various techniques to bind data between the components and the DOM elements.

Prerequisites

Before we begin, make sure you have Node.js and npm installed on your system. Also, ensure you have Angular CLI installed globally. If not, you can install it using the following command:

npm install -g @angular/cli

Getting Started

Let’s start by creating a new Angular project. Open your terminal and run the following commands:

ng new angular-databinding-demo
cd angular-databinding-demo

Now, let’s generate a new component named databinding-demo:

ng generate component databinding-demo

Understanding Databinding in Angular

Angular supports four types of databinding:

1. Interpolation: It allows you to output the component’s property values into the HTML template.
2. Property Binding: It lets you set the properties of HTML elements dynamically.
3. Event Binding: It allows you to listen to events raised by DOM elements and execute some logic in response.
4. Two-way Binding: It combines property binding and event binding to achieve a synchronization between the model and the view.

Interpolation

Let’s start with interpolation. Open the databinding-demo.component.ts file and define a property in the component class:

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

@Component({
  selector: 'app-databinding-demo',
  templateUrl: './databinding-demo.component.html',
  styleUrls: ['./databinding-demo.component.css']
})
export class DatabindingDemoComponent {
  title = 'Angular 7 Databinding Demo';
}

Now, open the databinding-demo.component.html file and use interpolation to display the value of the title property:

<h1>{{ title }}</h1>

Save the files and run the application using ng serve. You’ll see the title displayed in the browser.

Property Binding

Next, let’s explore property binding. We’ll dynamically change the color of a <div> based on a property value.

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

@Component({
  selector: 'app-databinding-demo',
  templateUrl: './databinding-demo.component.html',
  styleUrls: ['./databinding-demo.component.css']
})
export class DatabindingDemoComponent {
  isHighlighted = true;
}

<div [style.background-color]="isHighlighted ? 'yellow' : 'transparent'">
  Property Binding Example
</div>

Event Binding

Event binding allows us to listen to events raised by DOM elements. Let’s handle a button click event and change a property value accordingly.

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

@Component({
  selector: 'app-databinding-demo',
  templateUrl: './databinding-demo.component.html',
  styleUrls: ['./databinding-demo.component.css']
})
export class DatabindingDemoComponent {
  counter = 0;

  incrementCounter() {
    this.counter++;
  }
}

<button (click)="incrementCounter()">Click Me</button>
<p>Counter: {{ counter }}</p>

Two-way Binding

Two-way binding allows us to synchronize the data between the model and the view in real-time. We’ll use ngModel for two-way binding.

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

@Component({
  selector: 'app-databinding-demo',
  templateUrl: './databinding-demo.component.html',
  styleUrls: ['./databinding-demo.component.css']
})
export class DatabindingDemoComponent {
  inputValue = '';
}

<input [(ngModel)]="inputValue" placeholder="Enter your name">
<p>Your name is: {{ inputValue }}</p>

Conclusion

In this tutorial, we explored various databinding techniques in Angular 7, including interpolation, property binding, event binding, and two-way binding. Understanding these concepts is crucial for building dynamic and interactive Angular applications. Experiment with the examples provided to solidify your understanding. Happy coding!