TestimonialSmall

Features

• Customizable Rating: Displays a star rating out of 5, dynamically generated based on the input.
• Review Text: Showcases the user's review prominently.
• Reviewer Details: Includes a profile image, name, and platform details.
• Responsive Design: Ensures the testimonial is visually appealing across different screen sizes.

Inputs

The TestimonialSmallComponent provides the following inputs for customization:

• rating (number): Number of stars to display (default: 5).
• reviewText (string): Text of the review to display.
• profileImage (string): URL of the reviewer's profile image.
• reviewerName (string): Name of the reviewer.
• followers (string): Number of followers the reviewer has.
• platform (string): Platform where the reviewer is active (default: 'X').

Usage

Step 1: Import the Component

Add the TestimonialSmallComponent to your Angular project by including it in your page or component.

import { TestimonialSmallComponent } from "src/app/components/testimonial-small/testimonial-small.component";
 
@Component({
  ...
  imports: [..., TestimonialSmallComponent],
  ...
})

Step 2: Add the Template

Include the component in your template and provide the desired inputs:

<testimonial-small
  [rating]="5"
  [reviewText]="'This product is amazing!'"
  [profileImage]="'./assets/images/profile.jpg'"
  [reviewerName]="'John Doe'"
  [followers]="'10K'"
  [platform]="'Instagram'"
></testimonial-small>

Example

Dynamic Data Binding

You can dynamically bind the inputs to properties in your component:

rating = 4;
reviewText = "I absolutely love this tool!";
profileImage = "./assets/images/jane-profile.jpg";
reviewerName = "Jane Smith";
followers = "15K";
platform = "Twitter";

And in your template:

<testimonial-small
  [rating]="rating"
  [reviewText]="reviewText"
  [profileImage]="profileImage"
  [reviewerName]="reviewerName"
  [followers]="followers"
  [platform]="platform"
></testimonial-small>

Notes

• The component defaults to a 5-star rating and the platform 'X' if not specified.
• Ensure the profileImage URL is valid for correct rendering.
• The star rating dynamically adjusts based on the rating input.