How to use selectSlide in Angualr MDB Carousel

web
mobile

Topic: How to use selectSlide in Angualr MDB Carousel

anuragd asked 4 months 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">
            <mdb-carousel-item>
                .... do somethign with QnEl .... 
            </mdb-carousel-item>
      </ng-container>
</mdb-carousel>

On ts file

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

moveCarousel(index) 
{ console.log("moving carousel slide"); 
this.carousel.nativeElement.carousel.getSlide(index); 
}

**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 4 months 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) {
   this.carousel.selectSlide(index);
}

Hope it will help.

Best Regards, Bartosz.


Please insert min. 20 characters.
Status

Answered

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