Reactive Product Display with Angular Signals

Angular Signals provide a powerful way to manage reactive data. This challenge asks you to build a simple product display component that leverages signals to dynamically update the displayed price based on a discount percentage. This exercise will help you understand how to create, consume, and react to changes in signals within an Angular component.

Problem Description

You need to create an Angular component that displays a product's name, original price, discount percentage, and calculated discounted price. The original price and discount percentage should be defined as signals. The discounted price should be a computed signal derived from the original price and discount percentage. Whenever either the original price or the discount percentage changes, the displayed discounted price should automatically update.

Key Requirements:

• Signals: Use Angular Signals for originalPrice and discountPercentage.
• Computed Signal: Create a computed signal discountedPrice that calculates the discounted price based on originalPrice and discountPercentage.
• Template Binding: Display the product name, original price, discount percentage, and discounted price in the component's template.
• Input Controls: Provide input fields for the user to modify the originalPrice and discountPercentage. These inputs should directly update the corresponding signals.
• Error Handling: Ensure that the originalPrice and discountPercentage are valid numbers. If an invalid value is entered, display an appropriate error message.

Expected Behavior:

• The component should initially display a default product with a default price and discount.
• When the user enters a new value for the original price or discount percentage, the discounted price should update immediately in the template.
• If the user enters an invalid number (e.g., text, negative numbers where not allowed), an error message should be displayed next to the corresponding input field.
• The component should handle edge cases gracefully, such as a discount percentage of 100% or 0%.

Edge Cases to Consider:

• Invalid input (non-numeric values).
• Negative values for originalPrice (should be prevented or handled).
• Discount percentage outside the range of 0-100 (should be prevented or handled).
• Zero originalPrice (should result in a discounted price of 0).
• 100% discount (should result in a discounted price of 0).

Examples

Example 1:

Input: originalPrice = 100, discountPercentage = 10
Output: Product Name: Awesome Widget, Original Price: $100.00, Discount: 10%, Discounted Price: $90.00
Explanation: The discounted price is calculated as 100 - (100 * 0.10) = 90.

Example 2:

Input: originalPrice = 50, discountPercentage = 0
Output: Product Name: Fantastic Gadget, Original Price: $50.00, Discount: 0%, Discounted Price: $50.00
Explanation: A 0% discount results in the original price.

Example 3:

Input: originalPrice = 75, discountPercentage = 100
Output: Product Name: Incredible Device, Original Price: $75.00, Discount: 100%, Discounted Price: $0.00
Explanation: A 100% discount results in a price of 0.

Constraints

• The component should be written in TypeScript.
• The originalPrice should be a number between 0 and 1000 (inclusive).
• The discountPercentage should be a number between 0 and 100 (inclusive).
• The component should be responsive and visually appealing.
• The component should be well-structured and easy to understand.

Notes

• Consider using signal() and computed() from @angular/core.
• Use FormsModule for handling input fields and validation.
• Think about how to display error messages clearly to the user.
• Focus on creating a reactive component that automatically updates the displayed price whenever the input values change.
• You can use any styling framework you prefer (e.g., Bootstrap, Tailwind CSS, or plain CSS). The styling is not the primary focus of this challenge, but a clean and readable layout is appreciated.