TestimonialAvatars

Features

• Avatar List: Dynamically displays a collection of user avatars.
• Star Rating: Includes a 5-star rating for added emphasis.
• Customizable Call-to-Action: Allows for dynamic updates to the accompanying text.
• Responsive Design: Ensures proper layout across different screen sizes.

Inputs

This component currently does not accept external inputs but relies on internally defined data:

• avatars (Array): An array of avatar image URLs.
• reviewsText (string): The call-to-action text accompanying the avatars and star rating.

Both avatars and reviewsText can be updated in the TypeScript file for customization.

Usage

Step 1: Import the Component

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

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

Step 2: Add the Template

Include the component in your template:

<testimonial-avatars></testimonial-avatars>

Configuration

Customizing Data

Update the avatars array and reviewsText property in the TypeScript file to modify the content.

Example:

@Component({
  selector: "testimonial-avatars",
  standalone: true,
  imports: [CommonModule],
  templateUrl: "./testimonial-avatars.component.html",
})
export class TestimonialAvatarsComponent {
  avatars: string[] = [
    "assets/images/user1.webp",
    "assets/images/user2.webp",
    "assets/images/user3.webp",
  ];
  reviewsText: string = "Loved by thousands of users worldwide";
}

Example

Dynamic Data

You can define and dynamically update the avatars and call-to-action text:

avatars = [
  "assets/images/avatar1.webp",
  "assets/images/avatar2.webp",
  "assets/images/avatar3.webp",
];
reviewsText = "See why our users love us!";

And in your template:

<testimonial-avatars></testimonial-avatars>

Notes

• Ensure the avatars array contains valid image URLs for proper rendering.
• The star rating is fixed at 5 stars and cannot be modified dynamically.