Angular Property Binding: Displaying Dynamic Data

This challenge focuses on implementing property binding in Angular, a fundamental concept for dynamically updating the DOM based on component data. Mastering property binding is crucial for creating interactive and data-driven user interfaces in Angular applications.

Problem Description

You need to create an Angular component that displays a list of products. Each product has a name, price, and isInStock status. The component should dynamically render these details, utilizing Angular's property binding to update HTML elements.

Requirements:

1. Create a Product Component: Develop a new Angular component named ProductDisplayComponent.
2. Define Product Data: Inside ProductDisplayComponent, define a property (e.g., product) that holds an object with name (string), price (number), and isInStock (boolean) properties.
3. Display Product Name: Use property binding to display the product's name within an <h2> tag.
4. Display Product Price: Use property binding to display the product's price within a <p> tag. Format the price to two decimal places (e.g., "$19.99").
5. Conditionally Display Stock Status:
   • If isInStock is true, display the text "In Stock" within a <p> tag.
   • If isInStock is false, display the text "Out of Stock" within a <p> tag.
   • You can achieve this using property binding on attributes like [textContent] or by using Angular's structural directives like *ngIf (though for this challenge, focus on property binding where possible for direct element attribute manipulation if appropriate, or *ngIf for conditional rendering of elements).
6. Set the alt attribute of an image: Include an <img> tag. Use property binding to set its alt attribute to the product's name. The src attribute can be a placeholder image URL for this exercise.

Expected Behavior:

When the ProductDisplayComponent is rendered, it should correctly display the product's name, price, and its stock availability based on the product data. The alt attribute of the image should also be dynamically set.

Edge Cases:

• Consider how prices with zero decimal places should be formatted (e.g., "25.00").
• Ensure the component handles cases where the product data might be null or undefined gracefully (although for this specific challenge, assume valid product data is always provided).

Examples

Example 1:

Component Class (product-display.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-display',
  templateUrl: './product-display.component.html',
  styleUrls: ['./product-display.component.css']
})
export class ProductDisplayComponent {
  product = {
    name: 'Wireless Mouse',
    price: 24.99,
    isInStock: true
  };
}

Component Template (product-display.component.html):

<div>
  <h2>{{ product.name }}</h2>
  <p>{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p>
  <p *ngIf="product.isInStock">In Stock</p>
  <p *ngIf="!product.isInStock">Out of Stock</p>
  <img [src]="'assets/placeholder.png'" [alt]="product.name">
</div>

Rendered Output (HTML):

<div>
  <h2>Wireless Mouse</h2>
  <p>$24.99</p>
  <p>In Stock</p>
  <img src="assets/placeholder.png" alt="Wireless Mouse">
</div>

Explanation: The component's product property is used to bind data to the template. The name is displayed in an <h2>. The price is formatted using the currency pipe. The isInStock property controls the visibility of "In Stock" or "Out of Stock" messages using *ngIf. The alt attribute of the <img> tag is bound to the product's name.

Example 2:

Component Class (product-display.component.ts):

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-display',
  templateUrl: './product-display.component.html',
  styleUrls: ['./product-display.component.css']
})
export class ProductDisplayComponent {
  product = {
    name: 'Mechanical Keyboard',
    price: 120.00,
    isInStock: false
  };
}

Component Template (product-display.component.html):

<div>
  <h2>{{ product.name }}</h2>
  <p>{{ product.price | currency:'USD':'symbol':'1.2-2' }}</p>
  <p *ngIf="product.isInStock">In Stock</p>
  <p *ngIf="!product.isInStock">Out of Stock</p>
  <img [src]="'assets/placeholder.png'" [alt]="product.name">
</div>

Rendered Output (HTML):

<div>
  <h2>Mechanical Keyboard</h2>
  <p>$120.00</p>
  <p>Out of Stock</p>
  <img src="assets/placeholder.png" alt="Mechanical Keyboard">
</div>

Explanation: This example demonstrates the component handling a product that is out of stock. The *ngIf directive correctly hides "In Stock" and shows "Out of Stock". The price is displayed with two decimal places as required.

Constraints

• Your solution must be written in TypeScript within an Angular component.
• You are expected to use Angular's property binding syntax ([]) for dynamic attribute/property updates.
• The currency pipe is permitted and encouraged for price formatting.
• Assume the ProductDisplayComponent will be used in a context where it receives valid product data.

Notes

• Property binding is used to bind a DOM property (like alt, src, textContent) to a component property.
• The *ngIf directive is a powerful tool for conditional rendering of elements, and it works well in conjunction with property binding.
• Ensure your component's template file (.html) correctly references your component's TypeScript file (.ts) and its properties.
• You don't need to create a full Angular project; focus on the ProductDisplayComponent itself. You can imagine it being included in another component's template.