Building a "Product Details" Feature Module in Angular

This challenge focuses on creating a modular Angular application by encapsulating product details functionality within a dedicated feature module. Feature modules promote code organization, reusability, and lazy loading, which are crucial for building scalable and maintainable Angular applications. Your task is to create a "ProductDetailsModule" that displays product information and includes a simple component.

Problem Description

You need to create a new Angular feature module named ProductDetailsModule. This module should contain a single component, ProductDetailsComponent, which displays a product's name and description. The component should receive these details as input. The module should be designed to be lazy-loaded and independent of other parts of the application.

Key Requirements:

• Module Creation: Create a new Angular module named ProductDetailsModule.
• Component Creation: Create a component named ProductDetailsComponent within the module.
• Input Binding: The ProductDetailsComponent should accept a product name and description as @Input() properties.
• Template Display: The component's template should display the received product name and description.
• Lazy Loading Design: The module should be structured in a way that it can be easily lazy-loaded (though lazy loading configuration itself is not required for this challenge).
• No External Dependencies: The module should not depend on any other modules except for core Angular modules.

Expected Behavior:

When the ProductDetailsComponent is rendered with a product name and description, the template should display those values clearly. The module should be self-contained and not interfere with other parts of the application.

Edge Cases to Consider:

• What happens if the product name or description is an empty string? The component should still render without errors, displaying an appropriate message (e.g., "No name provided" or "No description available").
• What happens if the product name or description is null or undefined? Handle these cases gracefully, preventing errors and displaying a sensible default.

Examples

Example 1:

Input: Product Details: { name: "Awesome Widget", description: "This widget is truly awesome!" }
Output: The ProductDetailsComponent displays:
<h1>Awesome Widget</h1>
<p>This widget is truly awesome!</p>
Explanation: The component correctly receives and displays the provided product details.

Example 2:

Input: Product Details: { name: "", description: null }
Output: The ProductDetailsComponent displays:
<h1>No name provided</h1>
<p>No description available</p>
Explanation: The component handles empty/null values gracefully, providing default messages.

Constraints

• Angular Version: Assume Angular version 16 or later.
• TypeScript: The code must be written in TypeScript.
• Module Structure: The module must adhere to standard Angular module structure (declarations, imports, exports).
• No HTTP Requests: This challenge does not require fetching data from an API. The product details are provided as input.
• No Routing: This challenge does not require configuring routes within the module.

Notes

• Focus on creating a well-structured and maintainable module.
• Consider using template literals for cleaner string concatenation in the template.
• Think about how you would handle potential errors or unexpected input values.
• The goal is to demonstrate your understanding of Angular module creation and component input binding. You don't need to create a full application; just the module and component are sufficient.
• Remember to include the necessary imports in both the module and component files.