Angular Host Binding: Dynamically Style and Attribute Elements

This challenge focuses on leveraging Angular's host binding capabilities to dynamically manipulate the host element of a component. You will create a reusable Angular component that can apply CSS classes and HTML attributes to its own host element based on input properties, making it easier to create flexible and thematically consistent UI elements.

Problem Description

You are tasked with building an Angular component named DynamicHostDirective. This component should act as a directive that can be applied to any HTML element. The directive needs to dynamically bind to the host element's attributes and classes based on inputs provided to the directive.

Key Requirements:

1. Class Binding: The directive should accept an input property, hostClasses, which is an array of strings. Each string in this array represents a CSS class to be added to the host element.
2. Attribute Binding: The directive should accept an input property, hostAttributes, which is an object where keys are attribute names (strings) and values are attribute values (strings). Each key-value pair should be applied as an HTML attribute to the host element.
3. Dynamic Updates: When the input properties (hostClasses or hostAttributes) change, the directive must automatically update the host element's classes and attributes accordingly.
4. Removal of Bindings: When a class is removed from hostClasses or an attribute is removed from hostAttributes (e.g., by setting the property to undefined or an empty value), the corresponding class or attribute should be removed from the host element.

Expected Behavior:

When the DynamicHostDirective is applied to an element, and its hostClasses and hostAttributes inputs are set, the directive should modify the host element.

• If hostClasses is ['active', 'highlight'], the host element should have class="active highlight".
• If hostAttributes is { 'data-id': '123', 'aria-label': 'User profile' }, the host element should have data-id="123" and aria-label="User profile".
• If hostClasses changes to ['active'], the host element should lose the highlight class.
• If hostAttributes changes to { 'data-id': '456' }, the aria-label attribute should be removed, and data-id should be updated.

Edge Cases to Consider:

• What happens if hostClasses or hostAttributes are initially undefined or null?
• What happens if an attribute value is an empty string?
• What happens if an attribute name is an empty string? (This is generally invalid HTML, but consider how your binding handles it.)

Examples

Example 1:

// In a component template:
<div [dynamicHost]="{ hostClasses: ['btn', 'btn-primary'], hostAttributes: { 'data-role': 'button', 'type': 'submit' } }">
  Click Me
</div>

Output (applied to the div element):

<div class="btn btn-primary" data-role="button" type="submit">
  Click Me
</div>

Explanation: The dynamicHost directive has received an object with hostClasses set to ['btn', 'btn-primary'] and hostAttributes set to { 'data-role': 'button', 'type': 'submit' }. These are then applied to the host div element.

Example 2:

// Initial state:
<div [dynamicHost]="{ hostClasses: ['visible'], hostAttributes: { 'data-status': 'pending' } }"></div>

// After a change in the parent component:
// hostClasses is updated to ['visible', 'completed']
// hostAttributes is updated to { 'data-status': 'completed', 'data-timestamp': '1678886400' }

Output (after the change):

<div class="visible completed" data-status="completed" data-timestamp="1678886400"></div>

Explanation: The directive first applied class="visible" and data-status="pending". After the update, it added the completed class and the data-timestamp attribute, while also updating the data-status attribute's value.

Example 3: (Edge case with removal)

// Initial state:
<p [dynamicHost]="{ hostClasses: ['highlight'], hostAttributes: { 'data-info': 'important' } }">Some text</p>

// After a change:
// hostClasses is updated to []
// hostAttributes is updated to {}

Output (after the change):

<p>Some text</p>

Explanation: The highlight class and the data-info attribute were initially applied. When the input properties were set to empty, the directive correctly removed both the class and the attribute from the host element.

Constraints

• The directive must be implemented using Angular's @Directive decorator.
• The directive should use @Input() decorators for hostClasses and hostAttributes.
• The directive must use Angular's HostBinding decorator to bind to attributes and classes.
• The solution should be written in TypeScript.
• Performance is important: updates to host bindings should be efficient. Avoid unnecessary DOM manipulations.

Notes

• Consider how to handle complex data structures for hostAttributes. The example uses a simple object, but think about how you might extend this.
• Angular's HostBinding decorator allows you to bind to properties of the host element. You can bind to class.className for individual classes or attr.attributeName for attributes.
• Think about the lifecycle hooks available in Angular that might be useful for initial setup and subsequent updates.
• You might need to track previous states of hostClasses and hostAttributes to correctly remove bindings when they are no longer present in the input.