How to use selectSlide in Angualr MDB Carousel

Topic: How to use selectSlide in Angualr MDB Carousel

anuragd asked 2 years ago

**Expected behavior**

Hi, Iam trying to provide a button outside the MDB carousel and on its press call the selectSlide method to move to a specific slide number. Iam doing this as follows:

on html

<button mdbBtn type="button" color="default" class="waves-light"mdbWavesEffect (click)="moveCarousel(index)"> Move to Slide </button>

<mdb-carousel #carousel id="carouselExampleFade" data-ride="carousel" class="carousel slide carousel-fade mt-3" [isControls]="true" [animation]="'fade'" [interval]="'0'">
      <ng-container *ngFor="let QnEl of questions">
                .... do somethign with QnEl .... 

On ts file

@ViewChild("carousel", { static: true }) 
public carousel: ElementRef; 

{ console.log("moving carousel slide"); 

**Actual behavior**>

The above code is not working and giving the following error: ERROR> TypeError: Cannot read property 'carousel' of undefined> at ExplorerComponent.moveCarousel (explorer.component.ts:57)

Basically, my question is - how do I capture the carousel on Angular so that I can use the selectSlide method? Please share an example.

Bartosz Termena staff answered 2 years ago

Dear @anuragd

You have to refer to CarouselComponent in @ViewChild

Try to change your TS:

import { CarouselComponent } from 'your-path';

@ViewChild('carousel', { static: true })
   public carousel: CarouselComponent;

 moveCarousel(index) {

Hope it will help.

Best Regards, Bartosz.

Please insert min. 20 characters.


Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: Computer
  • Browser: Chrome
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No