Implementing Host Listeners in Angular Components

Angular's host listeners provide a powerful mechanism to react to events originating from the host element of a component. This challenge focuses on building a component that utilizes host listeners to respond to keyboard events (specifically, the 'keydown' event) and dynamically update its internal state and display. Understanding host listeners is crucial for creating interactive and responsive Angular components.

Problem Description

You are tasked with creating an KeyboardResponderComponent that listens for the 'keydown' event on its host element (the element the component is rendered into). When the 'keydown' event occurs, the component should:

1. Log the key code of the pressed key to the console.
2. Update a property called lastKeyPressed with the key code of the pressed key.
3. Display the value of lastKeyPressed in the component's template.

The component should be a simple, self-contained unit. Consider edge cases such as special keys (e.g., Shift, Ctrl, Alt) and ensure the component functions correctly regardless of the key pressed.

Examples

Example 1:

Input: User presses the 'Enter' key while focused on the component's host element.
Output:
Console: "Key code: 13"
Template: "Last Key Pressed: 13"
Explanation: The 'keydown' event is triggered, the key code (13 for Enter) is logged, `lastKeyPressed` is updated to 13, and the template displays "Last Key Pressed: 13".

Example 2:

Input: User presses the 'Shift' key while focused on the component's host element.
Output:
Console: "Key code: 16"
Template: "Last Key Pressed: 16"
Explanation: The 'keydown' event is triggered, the key code (16 for Shift) is logged, `lastKeyPressed` is updated to 16, and the template displays "Last Key Pressed: 16".

Example 3: (Edge Case)

Input: The component is not focused, and the user presses a key.
Output: No console log, `lastKeyPressed` remains unchanged.
Template: Displays the previous value of `lastKeyPressed` (or an initial value if it hasn't been set).
Explanation: Host listeners only fire when the component's host element has focus.

Constraints

• The component must be a standard Angular component.
• The host listener must be defined within the @HostListener decorator.
• The component must display the lastKeyPressed value in its template.
• The component should handle any key code without throwing errors.
• The component should not rely on external libraries.
• The component should be relatively performant; avoid unnecessary computations within the host listener.

Notes

• Remember to import HostListener from @angular/core.
• Consider using event.keyCode or event.key to access the key code. keyCode is generally more reliable across browsers.
• Ensure the component's host element has focus for the host listener to trigger. You can manually set focus using this.el.nativeElement.focus() in the ngAfterViewInit lifecycle hook if needed, but this is not strictly required for the core functionality.
• Think about how to initialize the lastKeyPressed property to a sensible default value.