Implementing a Custom ngStyle Directive in Angular

The ngStyle directive in Angular allows you to dynamically apply CSS styles to an element based on an expression. This challenge asks you to implement a simplified version of this directive, focusing on understanding how Angular directives work and how to manipulate the DOM. Successfully completing this challenge will solidify your understanding of Angular's directive lifecycle and DOM manipulation techniques.

Problem Description

You need to create a custom Angular directive called myStyle that mirrors the functionality of Angular's built-in ngStyle directive. The directive should accept an object as input, where the keys represent CSS properties and the values represent the corresponding CSS values. When the input object changes, the directive should update the styles of the host element accordingly.

What needs to be achieved:

• Create an Angular directive named myStyle.
• Accept an object as input, representing CSS styles.
• Apply the styles from the input object to the host element.
• Update the styles dynamically when the input object changes.

Key Requirements:

• The directive must be injectable.
• The directive must use @Input() to receive the style object.
• The directive must apply the styles to the host element using ElementRef and Renderer2. Direct DOM manipulation is discouraged; use Renderer2 for cross-platform compatibility.
• The directive should handle cases where the input object is null or undefined gracefully (no errors).

Expected Behavior:

When the myStyle directive is applied to an element and the input object changes, the element's styles should be updated to reflect the new values. If the input object is empty, no styles should be applied. If a style property is removed from the input object, the corresponding style should be removed from the element.

Edge Cases to Consider:

• Input object is null or undefined.
• Input object is empty.
• CSS property names are invalid (e.g., contain spaces or special characters). While you don't need to validate the property names, ensure your code doesn't throw errors if they are unexpected.
• CSS values are invalid (e.g., not a valid color or number). Again, focus on not throwing errors; invalid values should simply be ignored.

Examples

Example 1:

Input: <div myStyle="[ 'color': 'red', 'font-size': '20px' ]">Hello</div>
Output: The div element will have its text color set to red and its font size set to 20px.
Explanation: The directive applies the styles defined in the object to the div element.

Example 2:

Input: <p myStyle="{ 'background-color': 'blue', 'font-weight': 'bold' }"></p>
Output: The paragraph element will have a blue background and bold text.
Explanation: The directive applies the styles defined in the object to the paragraph element.

Example 3:

Input: <span myStyle="{}"></span>
Output: The span element will have no styles applied.
Explanation: An empty object is passed as input, so no styles are applied.

Example 4:

Input: <div myStyle="null"></div>
Output: The div element will have no styles applied.
Explanation: A null value is passed as input, so no styles are applied.

Constraints

• The directive must be written in TypeScript.
• The directive must use Angular's Renderer2 for DOM manipulation.
• The directive should be performant; avoid unnecessary DOM updates. Only update styles that have changed.
• The input object should be treated as a plain JavaScript object.

Notes

• Consider using ngOnChanges lifecycle hook to detect changes in the input object.
• The Renderer2 provides methods for setting element styles. Refer to the Angular documentation for details.
• Focus on the core functionality of applying styles based on an object. Error handling and extensive validation are not required for this challenge.
• Think about how to efficiently update the styles when the input object changes. You don't need to re-apply all styles every time; only update the ones that have changed.