3. Event Binding in Angular 20

Event binding enables interaction from the template to the component. You listen to user-generated events (like clicks, keystrokes, changes) and respond by executing a method defined in your component.

Syntax:

<button (click)="sayHello()">Click Me</button>

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: 'app.html'
})
export class App {
  sayHello() {
    alert('Hello Angular!');
  }
}

app.html

<h2>Click Event Example</h2>
<button (click)="sayHello()">Click Me</button>

Event binding is most commonly used with built-in DOM events but can also be used with custom events from child components.

Common Events in Angular:

• (click) – Fires when an element is clicked
• (input) – Fires when the value of an <input> changes
• (keyup) – Fires when the user releases a key
• (change) – Fires when a value changes (especially for select/dropdown)

Real-World Example: Student Registration

students.ts

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

@Component({
  selector: 'app-students',
  standalone: true,
  templateUrl: 'students.html'
})
export class Students {
  submitted = false;

  registerStudent() {
    this.submitted = true;
    alert('Student has been registered!');
  }
}

students.html

<h2>Student Registration</h2>

<button (click)="registerStudent()">Register</button>

<p *ngIf="submitted">Registration Successful!</p>

Two-Way Data Binding in Angular 20

Two-way data binding allows real-time synchronization between the component’s model and the UI. Angular provides this feature using the [(ngModel)] directive.

Syntax:

<input [(ngModel)]="username">

Behind the Scenes:

<input [value]="username" (input)="username = $event.target.value">

Setting Up Two-Way Binding

To use ngModel, import FormsModule into your standalone component:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: 'app.html'
})

Real-World Example: Email Subscription

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: 'app.html'
})
export class App {
  email = '';
  submitted = false;

  submitEmail() {
    this.submitted = true;
    alert('Subscribed with: ' + this.email);
  }
}

app.html

<h2>Subscribe to Newsletter</h2>

<input [(ngModel)]="email" placeholder="Enter your email">

<p>You typed: {{ email }}</p>

<button (click)="submitEmail()" [disabled]="!email">Submit</button>

<p *ngIf="submitted">Thank you for subscribing!</p>

Comparison: Property vs Event vs Two-Way Binding

Each binding type serves a different purpose. Use them depending on whether you’re pushing data to the view, responding to events, or keeping both in sync.

1. Attribute Binding in Angular

Attribute binding is used when you want to bind standard HTML attributes dynamically in Angular.
It’s especially useful for non-DOM properties like aria-label, colspan, and role.

📌 Syntax:

<button [attr.aria-label]="ariaLabel">Click Me</button>

✅ Why Use Attribute Binding?

Some HTML attributes do not map to DOM properties and cannot be set using property binding. Attribute binding lets you set these attributes dynamically.
For example:

• aria-label – used for accessibility
• colspan – used in tables
• role – used to define roles for accessibility
• custom attributes – like data-*

👨‍🏫 Real-World Example: Accessible Greeting Button

app.ts

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  templateUrl: 'app.html'
})
export class App {
  username = 'John Doe';
  isDisabled = false;

  get ariaLabel(): string {
    return `Click to greet ${this.username}`;
  }

  greet() {
    alert(`Hello, ${this.username}!`);
  }
}
  

app.html

<h2>Attribute Binding Example</h2>

<label>
  Username:
  <input [(ngModel)]="username" placeholder="Enter your name">
</label>

<br><br>

<button
  [attr.aria-label]="ariaLabel"
  [disabled]="isDisabled"
  (click)="greet()">
  Greet User
</button>

<p>
  <strong>aria-label:</strong> {{ ariaLabel }}
</p>

<p>
  <label>
    <input type="checkbox" [(ngModel)]="isDisabled"> Disable Button
  </label>
</p>
  

🆚 Attribute Binding vs Property Binding vs Interpolation

📝 Use attribute binding for HTML attributes that don’t map directly to properties,
property binding for DOM interactions,
and interpolation when displaying text content.