Implementing Dynamic Content Projection with ng-Content in Angular

This challenge focuses on understanding and implementing ng-content in Angular, a powerful feature for content projection. Content projection allows a component to accept and display content provided by its parent component, enabling highly reusable and flexible UI components. You'll build a simple card component that dynamically displays content passed to it from its parent.

Problem Description

You are tasked with creating a reusable CardComponent that utilizes ng-content to display content provided by its parent component. The CardComponent should have a basic structure (a title and a border) and dynamically render any content placed within its <card> tags in the parent component. The component should handle multiple instances of content and display them correctly. Consider how to handle cases where no content is provided.

What needs to be achieved:

• Create an Angular component called CardComponent.
• Implement ng-content within CardComponent to project content from the parent.
• The CardComponent should display a title "Card Title" and a simple border.
• The parent component should be able to pass arbitrary HTML content to the CardComponent.
• The CardComponent should gracefully handle cases where no content is provided.

Key Requirements:

• The CardComponent must be a standalone Angular component.
• The parent component must be able to use the CardComponent and pass content to it.
• The projected content should be rendered correctly within the CardComponent.
• The component should be reusable and adaptable to different content types.

Expected Behavior:

When the parent component renders the CardComponent with content, the CardComponent should display the title, border, and the provided content within the designated area. If no content is provided, the CardComponent should still display the title and border, but without any projected content.

Edge Cases to Consider:

• No content passed to the CardComponent.
• Multiple elements passed as content.
• Content containing Angular directives or components. (While this challenge doesn't require complex directive handling, ensure the basic projection works with standard HTML elements).

Examples

Example 1:

Input (Parent Component Template):
<card>
  <h1>Card Heading</h1>
  <p>This is some content inside the card.</p>
  <button>Click Me</button>
</card>

Output (Rendered HTML):
<div class="card">
  <h2>Card Title</h2>
  <div class="card-content">
    <h1>Card Heading</h1>
    <p>This is some content inside the card.</p>
    <button>Click Me</button>
  </div>
</div>

Explanation: The parent component passes HTML content (heading, paragraph, button) to the CardComponent. The CardComponent renders its title and border, and then projects the provided content within its designated area.

Example 2:

Input (Parent Component Template):
<card>
</card>

Output (Rendered HTML):
<div class="card">
  <h2>Card Title</h2>
  <div class="card-content"></div>
</div>

Explanation: The parent component passes no content to the CardComponent. The CardComponent still renders its title and border, but the card-content div is empty.

Constraints

• The CardComponent must be implemented as a standalone Angular component (no need for a module).
• The solution must be written in TypeScript.
• The styling should be minimal (CSS is acceptable for basic border and layout, but complex styling is not required).
• The solution should be functional and demonstrate the correct use of ng-content.

Notes

• Think about how to define the projection slot within the CardComponent's template.
• Consider using CSS to style the CardComponent and its projected content.
• Focus on the core functionality of content projection; advanced features like selective projection are not required for this challenge.
• You can use Angular CLI to create the component and project.