Course Progress 20%

Angular Event Binding

← Angular Property Binding Angular Two-Way Binding →

Angular में Event Binding component और template के बीच user interactions को handle करने का तरीका है। यह binding HTML events को component methods से connect करती है।

इस chapter में आप सीखेंगे:

  • Event Binding क्या है
  • HTML events को handle करना
  • Component methods के साथ events link करना
  • Template statements और parameters use करना
  • Best practices

Event Binding क्या है

Event binding में parentheses ( ) use होते हैं। Angular automatically event trigger होने पर component method call करता है।

Basic Example

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  greet() {
    alert('Hello Angular!');
  }
}

<!-- app.component.html -->
<button (click)="greet()">Click Me</button>

Explanation

  • (click) button click event को capture करता है
  • greet() method call होती है
  • User click करते ही alert show होगा

Event Binding with Input

Event binding input fields में भी use होती है:

export class AppComponent {
  userName = '';

  showName(name: string) {
    alert('User: ' + name);
  }
}

<input #inputBox type="text">
<button (click)="showName(inputBox.value)">Submit</button>

Explanation

  • #inputBox template reference variable है
  • Button click पर showName() call होती है और input value pass होती है

Event Binding with Keyboard Events

Angular में keyboard events जैसे keyup, keydown support होते हैं:

export class AppComponent {
  logKey(event: KeyboardEvent) {
    console.log('Pressed Key:', event.key);
  }
}

<input (keyup)="logKey($event)">

Explanation

  • $event special Angular variable है जो event object pass करता है
  • event.key pressed key की value देता है

Event Binding with Mouse Events

Mouse events handle करने के लिए:

export class AppComponent {
  showPosition(event: MouseEvent) {
    console.log(`X: ${event.clientX}, Y: ${event.clientY}`);
  }
}

<div (mousemove)="showPosition($event)" style="height:100px; border:1px solid #000;">
  Move your mouse here
</div>

Explanation

  • mousemove event हर movement पर trigger होगी
  • Mouse coordinates $event object से read होती हैं

Event Binding with Template Expressions

Event handler में template expressions directly use कर सकते हैं:

export class AppComponent {
  count = 0;
}

<button (click)="count = count + 1">Increment</button>
<p>Counter: {{ count }}</p>

Explanation

  • Click event पर counter value increase होती है
  • Component method call optional है
  • Small logic directly template में handle कर सकते हैं

Event Binding in Custom Components

Custom component events भी handle की जा सकती हैं:

// child.component.ts
import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notify()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notifyParent = new EventEmitter<string>();

  notify() {
    this.notifyParent.emit('Hello from Child!');
  }
}

<!-- parent.component.html -->
<app-child (notifyParent)="onNotify($event)"></app-child>

export class ParentComponent {
  onNotify(message: string) {
    alert(message);
  }
}

Explanation

  • Child component से parent component को data emit किया गया
  • @Output और EventEmitter use किए गए
  • Parent template में (notifyParent) handle किया

Common HTML Events

Angular mostly सभी HTML events support करता है:

  • Mouse events: click, dblclick, mouseenter, mouseleave, mousemove
  • Keyboard events: keyup, keydown, keypress
  • Form events: submit, focus, blur, change
  • Window events: resize, scroll

Best Practices

  • Complex logic component methods में रखें
  • Small expressions template में handle कर सकते हैं
  • $event object हमेशा check करें
  • Two-way binding और event binding combine करके forms handle करें

Summary

इस chapter में आपने सीखा:

  • Angular Event Binding basics
  • HTML events को component methods से link करना
  • Input, mouse और keyboard events handle करना
  • Template expressions में event logic use करना
  • Custom component events और @Output
  • Best practices
← Angular Property Binding Angular Two-Way Binding →
  • Home