Angular Bootstrap Testimonials section

Angular testimonials section - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

In order to present what people say about your project use our amazing testimonials.


Required styles import

Starting with MDB Angular 8, using the following components requires importing an additional stylesheet. Add the following imports to the global styles.scss stylesheet file.

        
            
          @import "~ng-uikit-pro-standard/assets/scss/core/colors";
          @import "~ng-uikit-pro-standard/assets/scss/core/variables";
          @import "~ng-uikit-pro-standard/assets/scss/core/variables-pro";
  
          @import "~ng-uikit-pro-standard/assets/scss/sections-pro/_testimonials-pro.scss";
        
        
    

Testimonials v.1 MDB Pro component

Testimonials v.1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

John Doe


Lorem ipsum dolor sit amet eos adipisci, consectetur adipisicing elit.

Anna Aston


Neque cupiditate assumenda in maiores repudiandae mollitia architecto.

Maria Kate


Delectus impedit saepe officiis ab aliquam repellat rem unde ducimus.

        
            
            <!-- Section: Testimonials v.1 -->
            <section class="text-center my-5">
  
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.1</h2>
              <!-- Section description -->
              <p class="dark-grey-text w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Fugit,
                error amet numquam iure provident voluptate esse quasi,
                veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
  
              <!-- Grid row -->
              <div class="row">
  
                <!--Grid column-->
                <div class="col-lg-4 col-md-12 mb-lg-0 mb-4">
                  <!--Card-->
                  <mdb-card class="testimonial-card">
                    <!--Background color-->
                    <div class="card-up info-color"></div>
                    <!--Avatar-->
                    <div class="avatar mx-auto white">
                      <mdb-card-img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).webp" class="rounded-circle"></mdb-card-img>
                    </div>
                    <mdb-card-body>
                      <!--Name-->
                      <h4 class="font-weight-bold mb-4">John Doe</h4>
                      <hr>
                      <!--Quotation-->
                      <p class="dark-grey-text mt-4">
                        <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet eos adipisci, consectetur
                        adipisicing elit.</p>
                    </mdb-card-body>
                  </mdb-card>
                  <!--Card-->
                </div>
                <!--Grid column-->
  
                <!--Grid column-->
                <div class="col-lg-4 col-md-6 mb-md-0 mb-4">
                  <!--Card-->
                  <mdb-card class="testimonial-card">
                    <!--Background color-->
                    <div class="card-up blue-gradient">
                    </div>
                    <!--Avatar-->
                    <div class="avatar mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp" class="rounded-circle img-fluid">
                    </div>
                    <mdb-card-body>
                      <!--Name-->
                      <h4 class="font-weight-bold mb-4">Anna Aston</h4>
                      <hr>
                      <!--Quotation-->
                      <p class="dark-grey-text mt-4">
                        <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Neque cupiditate assumenda in maiores repudiandae mollitia
                        architecto.</p>
                    </mdb-card-body>
                  </mdb-card>
                  <!--Card-->
                </div>
                <!--Grid column-->
  
                <!--Grid column-->
                <div class="col-lg-4 col-md-6">
                  <!--Card-->
                  <mdb-card class="testimonial-card">
                    <!--Background color-->
                    <div class="card-up indigo"></div>
                    <!--Avatar-->
                    <div class="avatar mx-auto white">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp" class="rounded-circle img-fluid">
                    </div>
                    <mdb-card-body>
                      <!--Name-->
                      <h4 class="font-weight-bold mb-4">Maria Kate</h4>
                      <hr>
                      <!--Quotation-->
                      <p class="dark-grey-text mt-4">
                        <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Delectus impedit saepe officiis ab aliquam repellat rem unde
                        ducimus.</p>
                    </mdb-card-body>
                  </mdb-card>
                  <!--Card-->
                </div>
                <!--Grid column-->
  
              </div>
              <!-- Grid row -->
  
            </section>
            <!-- Section: Testimonials v.1 -->
          
        
    

Testimonials v.2 MDB Pro component

Testimonials v.2

        
            
            <!-- Section: Testimonials v.2 -->
            <section class="text-center my-5">
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.2</h2>
              <!--Carousel Wrapper-->
              <mdb-carousel [isControls]="false" [animation]="'slide'" class="testimonial-carousel">
                <!--First slide-->
                <mdb-slide>
                  <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar mx-auto mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(30).webp" class="rounded-circle img-fluid"
                        alt="First sample avatar image">
                    </div>
                    <!--Content-->
                    <p>
                      <mdb-icon fas icon="quote-left"></mdb-icon> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos
                      id
                      officiis hic tenetur quae quaerat ad
                      velit ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore cum accusamus eveniet
                      molestias
                      voluptatum
                      inventore laboriosam labore sit, aspernatur praesentium iste impedit quidem dolor veniam.
                    </p>
                    <h4 class="font-weight-bold">Anna Deynah</h4>
                    <h6 class="font-weight-bold my-3">Founder at ET Company</h6>
                    <!--Review-->
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star-half" class="blue-text"> </mdb-icon>
                  </div>
                </mdb-slide>
                <!--/First slide-->
                <!--Second slide-->
                <mdb-slide>
                  <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar mx-auto mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).webp" class="rounded-circle img-fluid"
                        alt="Second sample avatar image">
                    </div>
                    <!--Content-->
                    <p>
                      <mdb-icon fas icon="quote-left"></mdb-icon> Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
                      fugit,
                      sed quia consequuntur magni dolores
                      eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit
                      amet,
                      consectetur,
                      adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore.
                    </p>
                    <h4 class="font-weight-bold">Maria Kate</h4>
                    <h6 class="font-weight-bold my-3">Photographer at Studio LA</h6>
                    <!--Review-->
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                  </div>
                </mdb-slide>
                <!--/Second slide-->
                <!--Third slide-->
                <mdb-slide>
                  <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar mx-auto mb-4">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(3).webp" class="rounded-circle img-fluid"
                        alt="Third sample avatar image">
                    </div>
                    <!--Content-->
                    <p>
                      <mdb-icon fas icon="quote-left"></mdb-icon> Duis aute irure dolor in reprehenderit in voluptate velit esse
                      cillum dolore
                      eu fugiat nulla
                      pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
                      anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                      doloremque
                      laudantium.</p>
                    <h4 class="font-weight-bold">John Doe</h4>
                    <h6 class="font-weight-bold my-3">Front-end Developer in NY</h6>
                    <!--Review-->
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                    <mdb-icon fas icon="star" class="blue-text"> </mdb-icon>
                  </div>
                </mdb-slide>
                <!--/Third slide-->
              </mdb-carousel>
              <!--/.Carousel Wrapper-->
            </section>
            <!-- Section: Testimonials v.2 -->
          
        
    

Testimonials v.3 MDB Pro component

Testimonials v.3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi, veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.

Anna Deynah

Web Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eos id officiis hic tenetur quae quaerat ad velit ab hic tenetur.

John Doe

Web Developer

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid commodi.

Maria Kate

Photographer

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

        
            
            <!-- Section: Testimonials v.3 -->
            <section class="team-section text-center my-5">
  
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.3</h2>
              <!-- Section description -->
              <p class="dark-grey-text w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Fugit,
                error amet numquam iure provident voluptate esse quasi,
                veritatis totam voluptas nostrum quisquam eum porro a pariatur veniam.</p>
  
              <!--Grid row-->
              <div class="row text-center">
  
                <!--Grid column-->
                <div class="col-md-4 mb-md-0 mb-5">
  
                  <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar mx-auto">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).webp" class="rounded-circle z-depth-1 img-fluid">
                    </div>
                    <!--Content-->
                    <h4 class="font-weight-bold dark-grey-text mt-4">Anna Deynah</h4>
                    <h6 class="font-weight-bold blue-text my-3">Web Designer</h6>
                    <p class="font-weight-normal dark-grey-text">
                      <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod
                      eos id
                      officiis hic tenetur quae quaerat
                      ad velit ab hic tenetur.</p>
                    <!--Review-->
                    <div class="orange-text">
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star-half"> </mdb-icon>
                    </div>
                  </div>
  
                </div>
                <!--Grid column-->
  
                <!--Grid column-->
                <div class="col-md-4 mb-md-0 mb-5">
  
                  <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar mx-auto">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).webp" class="rounded-circle z-depth-1 img-fluid">
                    </div>
                    <!--Content-->
                    <h4 class="font-weight-bold dark-grey-text mt-4">John Doe</h4>
                    <h6 class="font-weight-bold blue-text my-3">Web Developer</h6>
                    <p class="font-weight-normal dark-grey-text">
                      <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam
                      corporis
                      suscipit laboriosam, nisi ut
                      aliquid commodi.
                    </p>
                    <!--Review-->
                    <div class="orange-text">
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                    </div>
                  </div>
  
                </div>
                <!--Grid column-->
  
                <!--Grid column-->
                <div class="col-md-4">
  
                  <div class="testimonial">
                    <!--Avatar-->
                    <div class="avatar mx-auto">
                      <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp" class="rounded-circle z-depth-1 img-fluid">
                    </div>
                    <!--Content-->
                    <h4 class="font-weight-bold dark-grey-text mt-4">Maria Kate</h4>
                    <h6 class="font-weight-bold blue-text my-3">Photographer</h6>
                    <p class="font-weight-normal dark-grey-text">
                      <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>At vero eos et accusamus et iusto odio dignissimos ducimus qui
                      blanditiis praesentium voluptatum
                      deleniti atque corrupti.</p>
                    <!--Review-->
                    <div class="orange-text">
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                      <mdb-icon fas icon="star"> </mdb-icon>
                    </div>
                  </div>
  
                </div>
                <!--Grid column-->
  
              </div>
              <!--Grid row-->
  
            </section>
            <!-- Section: Testimonials v.3 -->
          
        
    

Testimonials v.4 MDB Pro component

Testimonials v.4

        
            
            <!-- Section: Testimonials v.4 -->
            <section class="container text-center my-5 mt-5">
              <!-- Section heading -->
              <h2 class="h1-responsive font-weight-bold my-5">Testimonials v.4</h2>
              <!-- Grid row -->
              <div class="row">
                <!--Carousel Wrapper-->
                <mdb-carousel [isControls]="true" class="carousel-multi-item multi-animation testimonial-carousel" [type]="'carousel-multi-item'"
                  [animation]="'slide'">
                  <!--First slide-->
                  <mdb-slide>
                    <!--Grid column-->
                    <div class="col-md-4">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(25).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Anna Deynah</h4>
                        <h6 class="blue-text font-weight-bold my-3">Web Designer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Quod eos
                          id officiis hic tenetur.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas [icon]="i == 4 ? 'star-half' : 'star'"   *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(32).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">John Doe</h4>
                        <h6 class="blue-text font-weight-bold my-3">Web Developer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam
                          corporis
                          laboriosam.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas icon="star" *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(31).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Abbey Clark</h4>
                        <h6 class="blue-text font-weight-bold my-3">Photographer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="fas fa-quote-left pr-2"></mdb-icon>Quis autem vel eum iure reprehenderit qui in ea voluptate
                          velit esse
                          quam nihil molestiae.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas [icon]="i == 4 ? 'star-o' : 'star' " *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                  </mdb-slide>
                  <!--/First slide-->
                  <!--Second slide-->
                  <mdb-slide>
                    <div class="col-md-4">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(4).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Blake Dabney</h4>
                        <h6 class="blue-text font-weight-bold my-3">Web Designer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-elft" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam
                          corporis
                          laboriosam.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas [icon]="i == 4 ? 'star-half' : 'star'"   *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(6).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Andrea Clay</h4>
                        <h6 class="blue-text font-weight-bold my-3">Front-end developer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Quod eos
                          id officiis hic tenetur
                          quae.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas icon="star" *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(7).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Cami Gosse</h4>
                        <h6 class="blue-text font-weight-bold my-3">Phtographer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>At vero eos et accusamus et iusto odio dignissimos ducimus
                          qui
                          blanditiis praesentium.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas [icon]="star == 4 ? 'star-o' : 'star'" *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                  </mdb-slide>
                  <!--/Second slide-->
                  <!--Third slide-->
                  <mdb-slide>
                    <!--Grid column-->
                    <div class="col-md-4">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(8).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Bobby Haley</h4>
                        <h6 class="blue-text font-weight-bold my-3">Web Developer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                          Quod eos
                          id officiis hic tenetur
                          quae.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas icon="star" *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(10).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Elisa Janson</h4>
                        <h6 class="blue-text font-weight-bold my-3">Marketer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>At vero eos et accusamus et iusto odio dignissimos ducimus
                          qui
                          blanditiis praesentium.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas [icon]="star == 4 ? 'star-half' : 'star'" *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-4 clearfix d-none d-md-block">
                      <div class="testimonial">
                        <!--Avatar-->
                        <div class="avatar mx-auto">
                          <img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).webp" class="rounded-circle img-fluid">
                        </div>
                        <!--Content-->
                        <h4 class="font-weight-bold mt-4">Rob Jacobs</h4>
                        <h6 class="blue-text font-weight-bold my-3">Front-end developer</h6>
                        <p class="font-weight-normal">
                          <mdb-icon fas icon="quote-left" class="pr-2"></mdb-icon>Ut enim ad minima veniam, quis nostrum exercitationem ullam
                          corporis
                          laboriosam.</p>
                        <!--Review-->
                        <div class="grey-text">
                          <mdb-icon fas [icon]="star == 4 ? 'star-o' : 'star'" *ngFor="let star of stars; let i = index"></mdb-icon>
                        </div>
                      </div>
                    </div>
                    <!--Grid column-->
                  </mdb-slide>
                  <!--/Third slide-->
                </mdb-carousel>
                <!--/.Carousel Wrapper-->
              </div>
              <!-- Grid row -->
            </section>
            <!-- Section: Testimonials v.4 -->
          
        
    
        
            
            import { Component } from '@angular/core';
  
            @Component({
              selector: 'carousel',
              templateUrl: './carousel.component.html',
              styleUrls: ['./carousel.component.scss'],
            })
            export class CarouselComponent {
              stars = Array(5);
            }
          
        
    

Angular testimonials - API

In this section you will find informations about required modules and available inputs, outputs, methods and events of Angular testimonials sections.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

        
            
          import { CardsFreeModule, CarouselModule, WavesModule } from 'ng-uikit-pro-standard'