Dynamic Content Rendering with NgTemplateOutlet

This challenge focuses on mastering Angular's ng-template and ngTemplateOutlet directive to dynamically render different content based on specific conditions or data. This is a fundamental technique for building flexible and reusable UI components in Angular.

Problem Description

Your task is to create an Angular component that can display a variable number of different content blocks. You will achieve this by using an ng-template to define the structure of a content block and then using ngTemplateOutlet to render that template conditionally or multiple times within another component.

What needs to be achieved:

1. Define an ng-template that represents a reusable content structure.
2. Create a parent component that hosts this template.
3. Implement logic in the parent component to dynamically render the ng-template content. This can involve rendering it based on a boolean flag or iterating over a collection.

Key requirements:

• The ng-template should be defined within the parent component's template.
• The ngTemplateOutlet directive should be used in the parent component's template to specify which template to render.
• You should demonstrate at least one scenario where the template is rendered conditionally (e.g., only when a property is true).
• You should demonstrate at least one scenario where the template is rendered multiple times, potentially with different data passed to each instance.

Expected behavior: The parent component should display content generated from the ng-template. The content should appear or disappear based on the conditional logic, and multiple instances of the content should be rendered as per the iteration logic.

Edge cases to consider:

• What happens if the template is supposed to be rendered, but no template is provided? (While ngTemplateOutlet handles this gracefully by not rendering anything, understanding this behavior is good).
• Passing different data contexts to multiple instances of the same template.

Examples

Example 1: Conditional Rendering

Input: A component with a boolean property showDetails set to true. An ng-template named detailTemplate containing some text like "This is detailed information." The parent component uses ngIf along with ngTemplateOutlet to render detailTemplate only when showDetails is true.

Output:

This is detailed information.

Explanation: Since showDetails is true, the ngTemplateOutlet directive renders the content defined within the detailTemplate.

Example 2: Multiple Instance Rendering

Input: A component with an array of strings: items = ['Apple', 'Banana', 'Cherry']. An ng-template named itemTemplate that expects an input item and displays it within a <li> tag. The parent component uses ngFor to iterate over the items array and renders itemTemplate for each item, passing the current item to the itemTemplate's context.

Output:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

Explanation: The ngFor directive iterates through the items array. For each item, the ngTemplateOutlet renders the itemTemplate, binding the current item to the template's context.

Example 3: Passing Data Context

Input: A component with an array of objects: products = [{ name: 'Laptop', price: 1200 }, { name: 'Mouse', price: 25 }]. An ng-template named productTemplate that expects an input product and displays the product name and price. The parent component iterates through products using ngFor and renders productTemplate, passing the entire product object to the template's context.

Output:

<div>
  <h3>Laptop</h3>
  <p>Price: $1200</p>
</div>
<div>
  <h3>Mouse</h3>
  <p>Price: $25</p>
</div>

Explanation: Each product object from the products array is passed to the productTemplate as its context. The productTemplate then uses this context to display the product's name and price.

Constraints

• The solution must be implemented in TypeScript within an Angular component.
• You must use the <ng-template> element and the *ngTemplateOutlet directive.
• Avoid using other directives like *ngIf or *ngFor directly to render template content; instead, leverage *ngTemplateOutlet in conjunction with them for conditional and iterative rendering.
• The component should be self-contained and demonstrate the concepts clearly.

Notes

• Remember that ng-template itself does not render any visible content. It's a blueprint for content that can be rendered by ngTemplateOutlet.
• The ngTemplateOutletContext input property of *ngTemplateOutlet is crucial for passing data into the template when it's rendered. You can pass an object where keys become variables available within the template.
• Consider how you will define and reference your templates using TemplateRef and @ViewChild if you need more programmatic control (though for this challenge, direct template reference in the parent's HTML is sufficient).
• Focus on clear separation of concerns: the template defines the structure, and the parent component orchestrates its rendering.