Question - How do I either replace a swiper slide with a new one or edit the contents of the HTML inside the slide using the wrapper library ngx-swiper-wrapper?
I have this code that creates a swiper slider with slides and I want to edit the slide or replace it with a new one when the 'slideNextTransitionStart' event is triggered.
<swiper
[config]="config"
[(index)]="index"
(slideNextTransitionStart)="slideChange($event)"
#swiper>
<app-member-card *ngFor="let member of members"
[routerLink]="['/members', member.name]"
[MemberCard]="member">
</app-member-card>
</swiper>
"app-member-card" is a custom component. I'd like either replace the slide with a new one (in typescript) or modify the "member" object and all it's data in the existing slide at a specific index, also through the typescript file.
slideChange(event: any) {
// not sure what I can do here to change the slide or edit the slides HTML
const sw = this.swiper;
}
Problem - I'm not sure how to do this. I can access the swiper component in my .ts file like this:
@ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
but I can't find any of the "manipulation" methods found here. And I'm not sure how to edit the HTML directly. I can dig into the component and get the HTML for the slide like this:
this.swiper.swiperSlides.nativeElement.children[0]
where children is the HTMLCollection array of each slide. But now what?