Mastering Event Binding in Angular

🔗 What is Event Binding in Angular?

Event binding in Angular allows your component to respond to user actions like clicks, key presses, mouse movements, and more.

It connects the DOM events (like click, input, keydown) to methods defined in your component class.

---

1. Click Event: Show Alert

🔹 Task: Show an alert message when a button is clicked.

<!-- A simple button that triggers a method when clicked -->
<button (click)="showAlert()">Show Alert</button>

// Component method that shows an alert
showAlert() {
  alert("Button clicked!"); // Pops up an alert message
}

** What’s happening?**

• The (click) event listens for a button click.
• It triggers the showAlert() method.
• alert() is a native JS function to show a popup.

---

2️. Toggle Text on Click

🔹 Task: Toggle text between “Hello” and “Goodbye” every time the button is clicked.

<!-- Display message and button to toggle it -->
<p></p>
<button (click)="toggleMessage()">Toggle Message</button>

// Initial message
message = "Hello";

// Toggle logic using ternary operator
toggleMessage() {
  this.message = this.message === "Hello" ? "Goodbye" : "Hello";
}

** What’s happening?**

• The `` is Angular’s interpolation that displays the current value.
• toggleMessage() updates the value between two options.
• When clicked, the paragraph text flips.

---

3️. Key Press Event: Capture Input

🔹 Task: As the user types in the input field, display the typed value below in real-time.

<!-- Input field bound to input event and text display -->
<input (input)="updateText($event)" placeholder="Type something" />
<p>You typed: </p>

// Store the user's input
userInput = "";

// Update the userInput on every keystroke
updateText(event: any) {
  this.userInput = event.target.value; // Captures real-time typing
}

** What’s happening?**

• (input) listens to keystrokes.
• $event.target.value gets the value of the input box.
• `` reflects the value immediately.

---

4️. Mouse Events: Change Color on Hover

🔹 Task: Change a div’s background color when mouse enters and leaves.

<!-- A div with hover events to change background color -->
<div
  (mouseover)="changeColor('lightblue')"
  (mouseleave)="changeColor('white')"
  [style.background]="bgColor"
  style="padding: 20px; text-align: center;"
>
  Hover over me!
</div>

// Initial background color
bgColor = "white";

// Method to update background color
changeColor(color: string) {
  this.bgColor = color;
}

** What’s happening?**

• (mouseover) and (mouseleave) detect mouse entry/exit.
• changeColor() sets a new background color.
• [style.background]="bgColor" binds the style dynamically.

---

Other Common Events

Event Type	Usage Example	Description
(input)	<input (input)="onType($event)">	Captures typing in input field
(keyup)	<input (keyup.enter)="onEnter()">	Detects Enter key press
(mouseover)	<div (mouseover)="hovered()">	Runs when mouse hovers over element
(change)	<select (change)="onChange()">	Fires when selection changes

---