TestimonialTriple

Features

• Customizable Title and Subtitle: Easily adjust the section's title and subtitle.
• Dynamic Testimonials: Accepts an array of testimonials with user details and messages.
• Responsive Design: Adapts to various screen sizes with a clean grid layout.
• Avatar Support: Displays user avatars or initials for a personalized touch.

Inputs

The TestimonialTripleComponent provides the following inputs for customization:

• title (string): Title of the testimonials section.
• subtitle (string): Subtitle providing additional context.
• testimonials (Array): An array of testimonial objects, each with the following structure:
  • message (string): The testimonial text.
  • name (string): The reviewer's name.
  • username (string): The reviewer's username (e.g., social media handle).
  • avatar (string, optional): URL of the reviewer's avatar image. If not provided, the first letter of the name is displayed.

Usage

Step 1: Import the Component

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

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

Step 2: Add the Template

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

<testimonial-triple
  [title]="'What Our Users Say'"
  [subtitle]="'Here are some reviews from our amazing customers'"
  [testimonials]="testimonialsArray"
></testimonial-triple>

Step 3: Define the Testimonials

Provide an array of testimonials in your component:

testimonialsArray = [
  {
    message: "This product has revolutionized the way I work!",
    name: "Alice Johnson",
    username: "alice123",
    avatar: "./assets/images/alice-avatar.jpg",
  },
  {
    message: "Fantastic tool. Highly recommended for anyone in the industry.",
    name: "Bob Smith",
    username: "bsmith",
  },
  {
    message: "A must-have for anyone looking to optimize their workflow.",
    name: "Carol White",
    username: "carol_w",
    avatar: "./assets/images/carol-avatar.jpg",
  },
];

Example

Dynamic Data Binding

Bind the inputs dynamically from your component:

title = "User Feedback";
subtitle = "What our users are saying about us";
testimonials = [
  { message: "Amazing product!", name: "Dave", username: "daveX" },
  { message: "Really helpful.", name: "Eva", username: "eva_intech" },
  { message: "Totally worth it!", name: "Frank", username: "frank_dev" },
];

And in your template:

<testimonial-triple
  [title]="title"
  [subtitle]="subtitle"
  [testimonials]="testimonials"
></testimonial-triple>

Notes

• The component dynamically handles user avatars or falls back to displaying the user's initials.
• Ensure the testimonials array follows the specified structure for consistency.