Dynamic Content Display with Template References in Angular

Angular's template reference variables are a powerful tool for interacting with DOM elements and component instances directly within your templates. This challenge will test your understanding of how to create and utilize these references to dynamically control the display of content based on user interaction.

Problem Description

You need to build an Angular component that displays a list of items. For each item, there should be a button that, when clicked, toggles the visibility of additional details associated with that item. You will use a template reference variable to access and manipulate the DOM element displaying these details.

Key Requirements:

1. Display a List of Items: The component should render a list of objects, each with a title and details property.
2. Toggle Details Visibility: For each item, display a "Show Details" or "Hide Details" button. Clicking this button should toggle the visibility of the details text.
3. Utilize Template Reference Variable: Use a template reference variable (e.g., #detailsContent) to point to the DOM element displaying the item's details.
4. Dynamic Class Binding: Apply a CSS class (e.g., hidden) to the details element to control its visibility. The presence or absence of this class should determine whether the details are shown or hidden.
5. Component Logic: Implement the component logic (TypeScript) to manage the state of visibility for each item's details and update the button text accordingly.

Expected Behavior:

• Initially, all item details should be hidden.
• Clicking "Show Details" for an item should reveal its details and change the button text to "Hide Details".
• Clicking "Hide Details" for an item should hide its details and change the button text back to "Show Details".

Edge Cases:

• Ensure that toggling the details for one item does not affect the visibility of details for other items.

Examples

Example 1:

Input Data (component property):

items = [
  { title: 'Angular Basics', details: 'Learn about components, directives, and services.' },
  { title: 'RxJS Essentials', details: 'Master observable patterns and operators.' }
];

Initial Render (Template HTML):

<div>
  <div *ngFor="let item of items">
    <h3>{{ item.title }}</h3>
    <button>Show Details</button>
    <p #detailsContent class="hidden">{{ item.details }}</p>
  </div>
</div>

State after clicking "Show Details" for "Angular Basics":

<div>
  <div *ngFor="let item of items">
    <h3>Angular Basics</h3>
    <button>Hide Details</button>
    <p #detailsContent>{{ item.details }}</p> <!-- 'hidden' class removed -->
  </div>
  <div *ngFor="let item of items">
    <h3>RxJS Essentials</h3>
    <button>Show Details</button>
    <p #detailsContent class="hidden">{{ item.details }}</p> <!-- 'hidden' class remains -->
  </div>
</div>

Explanation: The *ngFor directive iterates through the items array. For each item, a title, a button, and a details paragraph are rendered. The details paragraph has a template reference variable #detailsContent and initially has the hidden class applied. The button's text and the hidden class on the detailsContent are managed by the component's TypeScript logic.

Constraints

• The component must be implemented using Angular.
• The solution must be written in TypeScript.
• Avoid direct DOM manipulation outside of Angular's data binding mechanisms.
• The hidden CSS class should be defined (you can assume a basic CSS definition like .hidden { display: none; }).

Notes

• Consider how to manage the visibility state for each individual item within the *ngFor loop. You might need an auxiliary data structure or modify the item objects themselves.
• Think about how to update the button text based on the current visibility state.
• The ViewChild or ViewChildren decorators are not required for this challenge, as the template reference variable is used directly within the template for binding. Focus on using the #variableName syntax in the HTML template.