Topic: How to use selectSlide in Angualr MDB Carousel
anuragd free asked 5 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">
<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 5 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) {
this.carousel.selectSlide(index);
}
Hope it will help.
Best Regards, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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