DiscountInfo

Features

• Icon Support: Displays a customizable icon to highlight promotions.
• Animated Styles: Includes pulse animation for eye-catching emphasis.
• Responsive Design: Aligns and sizes text and icons for optimal readability.
• Dynamic Content: Allows easy updates to promotional messages.
• Customizable Inputs: Provides inputs for dynamic control of the discount value and customer amount.

Inputs

The DiscountInfoComponent provides the following inputs to customize its content dynamically:

• discountValue (number): Specifies the discount value in dollars. Defaults to 100.
• customersAmount (number): Specifies the number of customers eligible for the discount. Defaults to 10.

Usage

Step 1: Import the Component

Add the DiscountInfoComponent to your Angular project by including it in your module or component imports array.

import { DiscountInfoComponent } from "src/app/components/discount-info/discount-info.component";
 
@Component({
  ...
  imports: [..., DiscountInfoComponent],
  ...
})

Step 2: Add the Template

Include the component in your template and use the inputs to customize its behavior:

<discount-info [discountValue]="50" [customersAmount]="20"></discount-info>

Step 3: Dynamic Customization

Control the content dynamically by binding the inputs to component properties:

discountValue = 75;
customersAmount = 15;

<discount-info
  [discountValue]="discountValue"
  [customersAmount]="customersAmount"
></discount-info>

Component Structure

HTML Template

The default structure includes:

• Icon: Highlighted with animation for visibility.
• Text: Styled for promotional emphasis with customizable content.

Example Template

<div
  class="mt-3 text-teal-500 flex justify-content-center text-sm"
  *ngIf="discountValue && customersAmount"
>
  <lucide-angular
    [img]="giftIcon"
    style="margin-right: 3px"
    size="18"
    class="pulse-animation"
  ></lucide-angular>
  ${{ discountValue }} off
  <span class="text-600 ml-1">
    for the next {{ customersAmount }} {{ customersAmount === 1 ? "customer" :
    "customers" }}</span
  >
</div>

Notes

• Use the discountValue and customersAmount inputs to dynamically update the promotional content.
• The component automatically handles singular and plural forms based on the customersAmount value.