Implementing ContentChild in Angular for Dynamic Template Access

ContentChild in Angular allows you to access a child element projected into a component's template. This is particularly useful when you need to interact with or manipulate a specific element within the content that's being projected, enabling dynamic behavior and customization based on the projected content. This challenge will guide you through implementing ContentChild to access and interact with a projected element.

Problem Description

You are tasked with creating an Angular component called ProjectedWrapperComponent that utilizes ContentChild to access a projected div element with the class highlighted. The ProjectedWrapperComponent should then change the background color of this div to 'lightyellow' when its own highlight method is called. The ProjectedWrapperComponent should not directly create the div; it should rely on the parent component to project it.

Key Requirements:

• Create a ProjectedWrapperComponent that uses @ContentChild(QueryList, { read: ElementRef }) projectedElement to access the projected div.
• The projectedElement should be a QueryList of ElementRef objects.
• Implement a highlight() method in ProjectedWrapperComponent that changes the background color of the first element in the projectedElement QueryList to 'lightyellow'.
• Handle the case where no element with the class highlighted is projected. In this scenario, the highlight() method should do nothing.
• Ensure the highlight() method is called after the view has been initialized (e.g., using ngAfterViewInit).

Expected Behavior:

1. When the parent component projects a div with the class highlighted into ProjectedWrapperComponent, the projectedElement QueryList should contain a reference to that div.
2. Calling the highlight() method on ProjectedWrapperComponent should change the background color of the projected div to 'lightyellow'.
3. If no div with the class highlighted is projected, calling highlight() should have no effect.

Examples

Example 1:

Input (Parent Component Template):
<projected-wrapper>
  <div class="highlighted">This is the projected content.</div>
</projected-wrapper>

Output: The background color of the projected div changes to lightyellow after calling highlight() on ProjectedWrapperComponent.
Explanation: The ProjectedWrapperComponent successfully accesses the projected div and changes its background color.

Example 2:

Input (Parent Component Template):
<projected-wrapper>
  <p>This is some other content.</p>
</projected-wrapper>

Output: The background color of the projected element remains unchanged after calling highlight() on ProjectedWrapperComponent.
Explanation: No element with the class 'highlighted' was projected, so the highlight() method does nothing.

Constraints

• The solution must be written in TypeScript.
• The solution must use Angular's ContentChild decorator.
• The solution must handle the case where no matching element is projected.
• The solution should be performant and avoid unnecessary DOM manipulations.
• The highlighted class must be used to identify the element to be highlighted.

Notes

• Remember that ContentChild queries are populated after the view is initialized. Use ngAfterViewInit or a similar lifecycle hook to ensure the projectedElement is available.
• QueryList is an Observable-like object. You can iterate over it using projectedElement.first to access the first element.
• Consider using ElementRef to directly manipulate the DOM element.
• Think about how to handle the case where multiple elements with the class highlighted are projected. The current requirement only asks for highlighting the first one.