Highlight Text Attribute Directive in Angular

Attribute directives in Angular allow you to modify the behavior or appearance of existing DOM elements. This challenge asks you to create a custom attribute directive that highlights the text content of an element with a yellow background when the directive is applied. This is a fundamental concept in Angular and demonstrates how to manipulate the DOM directly.

Problem Description

You need to implement an Angular attribute directive called highlight. When applied to an element, the highlight directive should add a yellow background color to the element's text content. The directive should be reusable and applicable to any HTML element.

Key Requirements:

• The directive must be named HighlightDirective.
• The directive must be applied as an attribute: <div highlight>...</div>.
• The directive should modify the element's style to set the background color to yellow.
• The directive should not affect any other styling applied to the element. It should only change the background color of the text content.

Expected Behavior:

When the highlight attribute is present on an element, the background color of the element's text content should be yellow. When the attribute is removed, the background color should revert to its original state (or the default browser style).

Edge Cases to Consider:

• Elements with no text content. The directive should not cause errors.
• Elements with existing background colors. The directive should only set the background color to yellow, not overwrite other styles.
• Elements with complex HTML structures (e.g., nested elements). The directive should only affect the direct text content of the element it's applied to.

Examples

Example 1:

Input: <div highlight>This text should be highlighted.</div>
Output: <div highlight style="background-color: yellow;">This text should be highlighted.</div>
Explanation: The `highlight` directive is applied to the `div` element, and the background color of its text content is set to yellow.

Example 2:

Input: <p highlight>Some <span style="color: red;">red</span> text.</p>
Output: <p highlight style="background-color: yellow;">Some <span style="color: red;">red</span> text.</p>
Explanation: The `highlight` directive is applied to the `p` element. The background color of the entire `p` element's text content is yellow, including the `span` element's text.

Example 3:

Input: <div highlight></div>
Output: <div highlight style="background-color: yellow;"></div>
Explanation: Even with no text content, the directive should still apply the style.

Constraints

• The directive must be implemented using Angular's @Directive decorator.
• The directive must use the ElementRef to access and modify the element's style.
• The directive must not introduce any memory leaks.
• The directive should be compatible with standard Angular development practices.

Notes

• Consider using Renderer2 for safer DOM manipulation, especially when dealing with security concerns. However, for this simple example, ElementRef is acceptable.
• Think about how to handle elements that already have a background color set. Your directive should add to the existing styles, not overwrite them.
• Remember that the directive is an attribute directive, meaning it modifies the behavior or appearance of an existing element, rather than creating a new one.