⚡ Angular Events

? Topic: Event Binding in Angular

? Quick Overview

Events in Angular allow us to handle user interactions such as clicking a button, typing in an input box, moving the mouse, or focusing on form fields. Angular uses event binding syntax (event)="handler" to connect user actions from the template with component logic in TypeScript.

Commonly used events include: (click), (input), (mouseover), (mouseout), (focus), and (blur).

? Key Concepts

Event Binding: Connects a DOM event to a component method using (event)="method()".
$event Object: Gives access to event details such as the value typed into an input.
Template & Component: Template raises the event; component handles the logic.
User Experience: Events help create dynamic, responsive, and interactive UIs.

? Syntax / Theory

Basic event binding syntax in an Angular template:

? View Code Example

// Generic event binding syntax in Angular templates
<element (eventName)="handlerMethod($event)">...</element>

Here:

eventName is a DOM event like click, input, focus.
handlerMethod is defined in the component class.
$event carries information about what happened (e.g., the value of an input field).

? Code Examples

?️ Click Event – Button Click Counter

When the user clicks the button, a counter in the component increases and the UI updates automatically.

? View Code Example

// app.component.ts - App component that handles click events
import { Component } from '@angular/core';

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

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

? View Code Example

<!-- app.component.html - Template for click event example -->
<button (click)="increment()">Click Me</button>
<p>Button clicked {{ counter }} times</p>

⌨️ Input Event – Live Text Preview

As the user types into the input box, the text below updates in real time using the (input) event.

? View Code Example

<!-- app.component.html - Template that listens to input event -->
<input (input)="onInput($event)" placeholder="Type something">
<p>You typed: {{ message }}</p>

? View Code Example

// app.component.ts - Component logic for input event
message = '';

onInput(event: Event) {
  const target = event.target as HTMLInputElement;
  this.message = target.value;
}

?️ Mouse Events – Hover Box

Mouse events like (mouseover) and (mouseout) are great for hover effects and tooltips.

? View Code Example

<!-- app.component.html - Hover box using mouseover and mouseout events -->
<div
  (mouseover)="onMouseOver()"
  (mouseout)="onMouseOut()"
  style="width:200px;height:100px;border:1px solid black;text-align:center;line-height:100px;">
  Hover Me!
</div>
<p>{{ hoverMessage }}</p>

? View Code Example

// app.component.ts - Component logic for mouse events
hoverMessage = 'Not hovering';

onMouseOver() {
  this.hoverMessage = 'Mouse is over the box';
}

onMouseOut() {
  this.hoverMessage = 'Mouse left the box';
}

? Focus & Blur Events – Input State

Focus-related events help in form validation and adding visual feedback when fields are active or inactive.

? View Code Example

<!-- app.component.html - Input that reacts to focus and blur -->
<input
  (focus)="onFocus()
"
  (blur)="onBlur()"
  placeholder="Focus or blur me">
<p>{{ focusMessage }}</p>

? View Code Example

// app.component.ts - Component logic for focus and blur events
focusMessage = '';

onFocus() {
  this.focusMessage = 'Input field focused';
}

onBlur() {
  this.focusMessage = 'Input field blurred';
}

? Live Output / Explanation

Click Example: Each click on Click Me runs increment(), increasing counter. Angular’s change detection updates the text Button clicked {{ counter }} times.
Input Example: Every keystroke triggers onInput($event). The component reads event.target.value and assigns it to message, which instantly appears in the template.
Mouse Example: When the mouse enters the box, onMouseOver() sets hoverMessage to a new string. When it leaves, onMouseOut() updates it again.
Focus/Blur Example: When the input gains focus, onFocus() sets focusMessage to “Input field focused”; when it loses focus, onBlur() changes it to “Input field blurred”.

✅ Tips & Best Practices

Use (click) on buttons and interactive elements to keep logic inside component methods, not inline in the template.
(input) works well for real-time updates like search bars or live previews.
Use mouse events like (mouseover) and (mouseout) for hover effects instead of complex CSS-only tricks when you need logic.
(focus) and (blur) are perfect for showing validation messages when a field is entered or left.
Keep event handler methods small and focused; delegate heavy work to separate functions or services.
Use the $event object only when you really need event details; otherwise, keep method signatures simple.

? Try It Yourself / Practice Tasks

Create a counter app with both Increment and Decrement buttons using (click) events.
Build an input field that shows the live character count as you type using the (input) event.
Make a hover box that changes its background color on (mouseover) and reverts it on (mouseout).
Highlight an input field with a different border color when focused and reset it on (blur), using component properties to control CSS classes.
Create a form where submitting a button triggers a method that logs all values using event binding and the $event object.