Angular Data Binding Challenge: Dynamic Product Display

This challenge focuses on implementing data binding in Angular to dynamically display product information. You'll create a simple component that takes product data as input and renders it on the screen, demonstrating interpolation, property binding, and event binding. This is a fundamental concept in Angular, crucial for building interactive and dynamic user interfaces.

Problem Description

You are tasked with building an Angular component called ProductDisplayComponent that displays details of a single product. The component will receive a product object as input. The component should display the product's name, description, and price. Furthermore, it should include a button that, when clicked, logs a message to the console indicating that the "View Details" button was pressed for that specific product.

Key Requirements:

• Interpolation: Display the product's name and description using interpolation ({{ }}).
• Property Binding: Display the product's price using property binding. Format the price to two decimal places.
• Event Binding: Attach a click event listener to a button labeled "View Details". When clicked, the event listener should log a message to the console including the product's name.
• Input Property: The component should accept a single input property named product of type Product.

Expected Behavior:

• The component should render correctly when a Product object is passed as input.
• The product name and description should be displayed accurately.
• The product price should be displayed with two decimal places.
• Clicking the "View Details" button should log a message to the console containing the product's name.
• If no Product object is passed, the component should display a message indicating that no product is available.

Edge Cases to Consider:

• What happens if the product input is null or undefined? Handle this gracefully by displaying a "No product available" message.
• What if the product object is missing one of the properties (name, description, or price)? Consider displaying a default value or an error message. (For simplicity, assume all properties are always present for this challenge).

Examples

Example 1:

Input:
product = {
  name: "Awesome Widget",
  description: "A truly awesome widget for all your widgeting needs.",
  price: 19.99
}
Output:
Displays:
- Name: Awesome Widget
- Description: A truly awesome widget for all your widgeting needs.
- Price: $19.99
- A button labeled "View Details"
Clicking "View Details" logs: "View Details button pressed for: Awesome Widget" to the console.

Example 2:

Input:
product = null
Output:
Displays: "No product available"

Constraints

• The component must be written in TypeScript.
• The component must use Angular's data binding features (interpolation, property binding, event binding).
• The component should be well-structured and easy to understand.
• The component should handle the case where the product input is null or undefined.
• The price should be formatted to two decimal places.

Notes

• You'll need to define a Product interface to represent the product data.
• Consider using Angular's @Input() decorator to define the product input property.
• Think about how to handle the case where the product data is missing or invalid. For this challenge, a simple "No product available" message is sufficient for null/undefined input.
• Focus on demonstrating the core concepts of data binding. Styling and advanced error handling are not required for this challenge.

// Product interface
interface Product {
  name: string;
  description: string;
  price: number;
}