Home › Courses › Angular Events Explained Input Change Click Blur Focus Mouse Events

Angular Events Explained Input Change Click Blur Focus Mouse Events

9 / 63

Introduction

  1. In Angular applications, events are required in many situations.
  2. Examples include:
  3. Clicking a button
  4. Submitting a form
  5. Detecting input value changes
  6. This video explains how to use important Angular events, call functions on events, and identify which event was triggered.


Events Covered in This Video

  1. Input event
  2. Change event
  3. Click event
  4. Dropdown change event
  5. Blur event
  6. Focus event
  7. Mouse enter event
  8. Mouse leave event


HTML Code Used in the Video


<h1>Events</h1>

<input type="text" (input)="handleEvent($event.type)">
<input type="text" (change)="handleEvent($event.type)">

<button (click)="handleEvent($event.type)">Click</button>

<select (change)="handleEvent($event.type)">
<option value="">car</option>
<option value="">bike</option>
<option value="">mobile</option>
</select>

<input type="text" (blur)="handleEvent($event.type)">
<input type="text" (focus)="handleEvent($event.type)">

<div (mouseleave)="handleEvent($event.type)" class="div1"></div>
<div (mouseenter)="handleEvent($event.type)" class="div2"></div>


TypeScript Code Used in the Video


handleEvent(eventName: string) {
console.log(eventName);
}


Input Event

  1. (input) event triggers on every keystroke.
  2. It gives real-time feedback.
  3. Event type logged in console as input.


Change Event

  1. (change) event triggers after the input loses focus.
  2. Typing alone does not trigger it.
  3. Console logs change.


Click Event

  1. (click) event is used on a button.
  2. Triggers when the button is clicked.
  3. Console logs click.


Dropdown Change Event

  1. (change) event is used on <select>.
  2. Triggers when selected option changes.
  3. Console logs change.


Blur Event

  1. (blur) event triggers when input loses focus.
  2. Happens when user clicks outside the input field.
  3. Console logs blur.


Focus Event

  1. (focus) event triggers when input gains focus.
  2. Happens when user clicks inside the input field.
  3. Console logs focus.


Mouse Events on Div

Mouse Enter

  1. (mouseenter) triggers when mouse enters the div.
  2. Console logs mouseenter.


Mouse Leave

  1. (mouseleave) triggers when mouse leaves the div.
  2. Console logs mouseleave.


Key Concept

  1. $event.type is used to identify which event was triggered.
  2. Same handleEvent function is reused for all events.


Share this lesson: