Angular Host Listener: Interactive Element Feedback

This challenge focuses on leveraging Angular's @HostListener decorator to create dynamic and interactive user interfaces. You will implement a component that visually responds to specific user interactions on its host element, providing immediate feedback. This skill is crucial for building engaging web applications where elements need to change their appearance or behavior based on user input.

Problem Description

Your task is to create an Angular component that listens for two specific events on its host element: mouseenter and mouseleave. When the mouse pointer enters the host element, the component should add a CSS class to the host element. When the mouse pointer leaves the host element, the component should remove that same CSS class.

Key Requirements:

1. Create a new Angular component: This component will be responsible for the host listener logic.
2. Use @HostListener: Implement the @HostListener decorator to capture mouseenter and mouseleave events on the component's host element.
3. Toggle a CSS class: Based on the event:
   • On mouseenter, add a CSS class named highlight.
   • On mouseleave, remove the highlight class.
4. Define component styles: Include CSS within the component's stylesheet to define how the highlight class should visually alter the host element (e.g., change background color, border).

Expected Behavior:

When an instance of your component is rendered in an application, and the user's mouse pointer hovers over it, the element should visually change according to the highlight CSS. When the mouse pointer moves away, the element should revert to its default appearance.

Important Considerations:

• The component itself should not have a defined template (i.e., it will be a directive-like component that applies behavior to its host).
• The styling should be encapsulated within the component's stylesheet.

Examples

Example 1: Basic Interaction

• Scenario: A highlight-box.component.ts and highlight-box.component.css are created. An instance of this component is placed on a simple div element in the parent component's template: <app-highlight-box></app-highlight-box>.

• Input: User moves the mouse pointer over the div containing the app-highlight-box component.

• Output: The div visually changes (e.g., its background color turns yellow).

• Explanation: The mouseenter @HostListener triggers, adding the highlight class.

• Scenario: User moves the mouse pointer away from the div.

• Input: Mouse leaves the div containing the app-highlight-box component.

• Output: The div reverts to its default appearance.

• Explanation: The mouseleave @HostListener triggers, removing the highlight class.

Example 2: Styling the Highlight

• highlight-box.component.ts (Conceptual):

  import { Component, HostListener } from '@angular/core';
  
  @Component({
    selector: 'app-highlight-box',
    template: '', // No template, applies behavior to host
    styleUrls: ['./highlight-box.component.css']
  })
  export class HighlightBoxComponent {
  
    @HostListener('mouseenter') onMouseEnter() {
      // Logic to add 'highlight' class to host
    }
  
    @HostListener('mouseleave') onMouseLeave() {
      // Logic to remove 'highlight' class from host
    }
  }
  

• highlight-box.component.css:

  :host {
    display: block; /* Ensure it takes up space */
    padding: 20px;
    border: 1px solid #ccc;
    transition: background-color 0.3s ease; /* Smooth transition */
  }
  
  :host(.highlight) {
    background-color: yellow;
    border-color: orange;
  }
  

• app.component.html:

  <div style="width: 200px; height: 100px; margin: 50px;">
    <app-highlight-box></app-highlight-box>
  </div>
  

• Input: User hovers over the div (which now hosts app-highlight-box).

• Output: The div's background becomes yellow and its border turns orange.

• Explanation: The :host(.highlight) CSS rule is applied because the highlight class is added to the host element by the mouseenter listener.

Constraints

• The Angular version should be recent (e.g., Angular 12+).
• The solution must be implemented using TypeScript.
• No external libraries beyond standard Angular modules are permitted.
• The solution should be performant for typical UI interactions.

Notes

• Think about how Angular manages the host element and how decorators like @HostListener interact with it.
• Consider the difference between applying styles directly to the host element versus its content. The :host pseudo-class in CSS is your friend here.
• You'll need to manually manage the addition and removal of the class. Angular provides ways to do this programmatically within your component methods.