Angular Module Implementation: Product Catalog

This challenge focuses on implementing a reusable Angular module that encapsulates the logic and presentation for displaying a product catalog. Building modular applications is a core principle of Angular development, promoting code reusability, maintainability, and testability. Your task is to create a module that takes a list of products as input and renders them in a user-friendly format.

Problem Description

You need to create an Angular module named ProductCatalogModule. This module should:

Accept a list of products: The module should receive an array of product objects as input. Each product object will have the following properties: id (number), name (string), description (string), and price (number).
Display the product list: The module should render a list of product cards, each displaying the product's name, description, and price.
Provide a component: The module should expose a single component named ProductCatalogComponent that accepts the product list as input.
Use a simple template: The template for ProductCatalogComponent should be straightforward and easy to understand. Focus on functionality over complex styling.
Be reusable: The module should be designed to be easily imported and used in other Angular applications or modules without modification.

Expected Behavior:

When the ProductCatalogComponent is used in a parent component and provided with a list of products, it should render a list of product cards, each displaying the product's information. If the product list is empty, it should display a message indicating that no products are available.

Edge Cases to Consider:

Empty Product List: Handle the case where the input product list is empty gracefully.
Invalid Product Data: While not strictly required for this challenge, consider how you might handle potentially invalid product data (e.g., missing properties, incorrect data types). A simple check and error message would suffice.

Examples

Example 1:

Input: products = [{id: 1, name: "Laptop", description: "Powerful laptop for work and play", price: 1200}, {id: 2, name: "Mouse", description: "Ergonomic wireless mouse", price: 25}]
Output: A list of two product cards, one for "Laptop" and one for "Mouse", displaying their respective details.
Explanation: The component iterates through the `products` array and renders a card for each product.

Example 2:

Input: products = []
Output: A message indicating "No products available."
Explanation: The component checks if the `products` array is empty and displays a corresponding message.

Constraints

Angular Version: Assume Angular version 16 or later.
Module Structure: The module must be a standard Angular module with a component.
Input Type: The input product list must be an array of objects conforming to the specified product object structure.
Performance: For this challenge, performance is not a primary concern. Focus on correctness and clarity.

Notes

You can use any Angular features you are comfortable with, such as *ngFor for iterating over the product list.
Consider using @Input() decorator to receive the product list in the component.
The styling of the product cards is not a requirement; focus on the core module functionality.
This challenge is designed to assess your understanding of Angular module creation and component interaction. Think about how to structure your code for reusability and maintainability.

Angular Module Implementation: Product Catalog

Problem Description

You need to create an Angular module named ProductCatalogModule. This module should:

Accept a list of products: The module should receive an array of product objects as input. Each product object will have the following properties: id (number), name (string), description (string), and price (number).

Display the product list: The module should render a list of product cards, each displaying the product's name, description, and price.

Provide a component: The module should expose a single component named ProductCatalogComponent that accepts the product list as input.

Use a simple template: The template for ProductCatalogComponent should be straightforward and easy to understand. Focus on functionality over complex styling.

Be reusable: The module should be designed to be easily imported and used in other Angular applications or modules without modification.

Expected Behavior:

Edge Cases to Consider:

Empty Product List: Handle the case where the input product list is empty gracefully.

Invalid Product Data: While not strictly required for this challenge, consider how you might handle potentially invalid product data (e.g., missing properties, incorrect data types). A simple check and error message would suffice.

Examples

Example 1:

Input: products = [{id: 1, name: "Laptop", description: "Powerful laptop for work and play", price: 1200}, {id: 2, name: "Mouse", description: "Ergonomic wireless mouse", price: 25}] Output: A list of two product cards, one for "Laptop" and one for "Mouse", displaying their respective details. Explanation: The component iterates through the `products` array and renders a card for each product.

Example 2:

Input: products = [] Output: A message indicating "No products available." Explanation: The component checks if the `products` array is empty and displays a corresponding message.

Constraints

Angular Version: Assume Angular version 16 or later.

Module Structure: The module must be a standard Angular module with a component.

Input Type: The input product list must be an array of objects conforming to the specified product object structure.

Performance: For this challenge, performance is not a primary concern. Focus on correctness and clarity.

Notes

You can use any Angular features you are comfortable with, such as *ngFor for iterating over the product list.

Consider using @Input() decorator to receive the product list in the component.

The styling of the product cards is not a requirement; focus on the core module functionality.

This challenge is designed to assess your understanding of Angular module creation and component interaction. Think about how to structure your code for reusability and maintainability.