Angular Standalone Component: Product Card

This challenge asks you to create a reusable Angular standalone component that displays product information. Standalone components are a key feature in newer Angular versions, simplifying module management and improving application structure. Successfully completing this challenge demonstrates your understanding of standalone component creation and data binding in Angular.

Problem Description

You need to build a standalone Angular component called ProductCard that receives product data as input and displays it in a visually appealing card format. The component should accept a product object as input and render the product's name, description, price, and an image (if available). The component should be standalone, meaning it doesn't require a parent module.

Key Requirements:

• Standalone: The component must be a standalone component, not part of an Angular module.
• Input: The component must accept a product object as input.
• Data Binding: The component must display the product's name, description, price, and image (if present) using Angular's data binding features.
• Image Handling: If the product doesn't have an image URL, display a placeholder image.
• Clear Display: The component should present the product information in a clean and readable format.

Expected Behavior:

When the ProductCard component receives a product object, it should render a card displaying the product's details. If the product object is missing any of the expected properties (name, description, price, image), the component should gracefully handle the missing data (e.g., display "N/A" or a placeholder).

Edge Cases to Consider:

• Product object is null or undefined.
• Product object is missing one or more properties (name, description, price, image).
• Image URL is invalid or the image fails to load.
• Price is a number, string, or potentially null/undefined.

Examples

Example 1:

Input:
{
  name: "Awesome T-Shirt",
  description: "A comfortable and stylish t-shirt.",
  price: 25.99,
  imageUrl: "https://example.com/images/tshirt.jpg"
}
Output:
A card displaying "Awesome T-Shirt", "A comfortable and stylish t-shirt.", $25.99, and the image from the URL.
Explanation: The component correctly renders all provided product details.

Example 2:

Input:
{
  name: "Basic Mug",
  description: "A simple ceramic mug.",
  price: 9.99
}
Output:
A card displaying "Basic Mug", "A simple ceramic mug.", $9.99, and a placeholder image.
Explanation: The component handles the missing image URL by displaying a placeholder.

Example 3:

Input:
null
Output:
A card displaying "N/A" for all fields, or a message indicating no product data is available.
Explanation: The component gracefully handles a null input.

Constraints

• Angular Version: Use Angular 16 or later.
• Standalone Component: The component must be a standalone component. Do not use an NgModule.
• Placeholder Image: Use a readily available placeholder image URL (e.g., "https://via.placeholder.com/150").
• Error Handling: Basic error handling for image loading is sufficient (e.g., displaying the placeholder). No need for complex error reporting.
• Performance: The component should render efficiently. Avoid unnecessary computations or DOM manipulations.

Notes

• Consider using Angular's @Component decorator to define the component.
• Utilize Angular's @Input() decorator to receive the product data.
• Use Angular's data binding syntax (e.g., {{ product.name }}) to display the product information.
• Think about how to handle potential errors or missing data gracefully.
• Focus on creating a clean, reusable, and well-structured component.
• You are only required to create the component itself. No need to create a full application or test suite.