Angular Data Binding

This tutorial demonstrates how to use Angular’s different types of data binding in a standalone component setup. Standalone components allow us to create Angular components without needing to declare them in an NgModule. We will demonstrate the following data bindings:

• One-Way Data Binding (Interpolation)
• Two-Way Data Binding (NgModel)
• Event Binding
• Property Binding
• Attribute Binding
• Class Binding
• Style Binding
• Template Variables

1. One-Way Data Binding (Interpolation)

Displays data from the component in the template.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `<h1>Welcome, {{ userName }}!</h1>`,
})
export class AppComponent {
  userName = 'Joe';
}

2. Two-Way Data Binding (NgModel)

Synchronizes input data between the component and the template.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input [(ngModel)]="userName" placeholder="Enter your name" />
    <p>Your name is: {{ userName }}</p>
  `,
})
export class AppComponent {
  userName = 'Joe';
}

3. Event Binding

Responds to user actions like button clicks.

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

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <button (click)="sayHello()">Click Me</button>
    <p>{{ message }}</p>
  `,
})
export class AppComponent {
  message = '';
  sayHello() {
    this.message = 'Hello, Angular!';
  }
}

4. Property Binding

Binds a property of a DOM element to a component property.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <img [src]="imageUrl" alt="Logo" width="50" height="50"/>
  `,
})
export class AppComponent {
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
}

5. Attribute Binding

Binds an attribute of an HTML element to a component property.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <img [src]="imageUrl" alt="Logo" [attr.width]="iWidth" [attr.height]="iHeight"/>
    <button [attr.aria-label]="ariaLabel">Click Me</button>
  `,
})
export class AppComponent {
  ariaLabel = 'Click to perform an action';
  imageUrl = 'https://angular.io/assets/images/logos/angular/angular.svg';
  iWidth = 100 ;
  iHeight = 100;
}

6. Class Binding

Dynamically adds or removes CSS classes based on logic.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h4 [class.active]="isActive">Toggle Class</h4>
    <button (click)="toggleActive()">Toggle Active</button>
  `,
  styles: [
    `
      .active {
        background-color: green;
        color: white;
      }
    `,
  ],
})
export class AppComponent {
  isActive = false;

  toggleActive() {
    this.isActive = !this.isActive;
  }
}

7. Style Binding

Dynamically applies styles to an element.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <p [style.color]="textColor">This is dynamic text color!</p>
    <button (click)="changeColor()">Change Color</button>
  `,
})
export class AppComponent {
  textColor = 'blue';

  changeColor() {
    this.textColor = this.textColor === 'blue' ? 'red' : 'blue';
  }
}

8. Template Variables

Access and reference a DOM element directly.

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <input #textInput type="text" placeholder="Type something" />
    <button (click)="showValue(textInput.value)">Show Value</button>
    <p>{{ message }}</p>
  `,
})
export class AppComponent {
  message = '';

  showValue(value: string) {
    this.message = `You typed: ${value}`;
  }
}

Additional Keyboard Events to handle input

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
  <input type="text" (keydown)="onKeyDown($event)" (keyup)="onKeyUp($event)"
  (focus)="onFocus()"  (blur)="onBlur()" />
  `,
})
export class AppComponent {
  onKeyDown(event: KeyboardEvent): void {
   console.log(`Key Down: ${event.key}`);
  }
  onKeyUp(event: KeyboardEvent): void {
   console.log(`Key Up: ${event.key}`);
  }
  onFocus(): void {
    console.log('Input field gained focus');
  }
  onBlur(): void {
    console.log('Input field lost focus');
  }
}

Mouse Events : Try below mouse events

Event	        Description
(click)	        Fired on a single mouse click.
(dblclick)	Fired on a double-click.
(mousedown)	Fired when a mouse button is pressed.
(mouseup)	Fired when a mouse button is released.
(mouseenter)	Fired when the mouse enters an element.
(mouseleave)	Fired when the mouse leaves an element.
(mousemove)	Fired when the mouse moves within an element.
(mouseover)	Fired when the mouse moves over an element or its child.
(mouseout)	Fired when the mouse moves out of an element or its child.

Summary

Binding Type	Syntax Example
Interpolation	{{ userName }}
Two-Way Binding	[(ngModel)]="userName"
Event Binding	(click)="sayHello()"
Property Binding	[src]="imageUrl"
Attribute Binding	[attr.aria-label]="ariaLabel"
Class Binding	[class.active]="isActive"
Style Binding	[style.color]="'green'"
Template Variable	#textInput and textInput.value