Desired outcome: When incorporating multiple ionic slides components into a page, the ability to reference and adjust their properties based on screen size is expected.
Current situation: Upon adding multiple ionic slides components to a page and attempting to modify their properties based on screen size, only the last created slide component actually reflects the new settings.
MovieSliderComponent.html
<ion-slides #Slides class="slides" *ngIf="movies.length > 0" centeredSlides="true" loop="true" slidesPerView="3">
A reference to slides is included in the HTML code.
MovieSliderComponent.ts
@ViewChild('Slides') slider: Slides;
The reference is applied to a variable.
Home.html
<movie-slider #Slider id="nowPlaying" *ngIf="mdata.inTheatres.length > 0" [movies]="mdata.inTheatres">
<movie-slider #Slider id="nowPlayingNearYou" *ngIf="mdata.nearbyShowings.length > 0" [movies]="mdata.nearbyShowings">
<movie-slider #Slider id="genreSuggestions" *ngIf="mdata.suggestedByGenre.length > 0" [movies]="mdata.suggestedByGenre" [showGenres]="true">
The component is included in the page HTML three times.
Home.ts
@ViewChildren('Slider') Slides: MovieSliderComponent[];
Each of the sliders is referenced in a variable.
setSlidesPerView() {
if(this.platform.width() >= 1200) {
this.Slides.forEach((slider) => slider.slider.slidesPerView = 5);
console.log(this.platform.width());
}
else if(this.platform.width() >= 319 && this.platform.width() < 1200) {
this.Slides.forEach((slider) => slider.slider.slidesPerView = 3);
}
else if(this.platform.width() < 319) {
this.Slides.forEach((slider) => slider.slider.slidesPerView = 1);
}
this.cd.detectChanges();
}
An attempt is made to alter the slidesPerView option for each slider, but only the last slide with slide-id-2 gets updated.
Original issue link @ionic-team/ionic-v3 https://github.com/ionic-team/ionic-v3/issues/990