Swiper@6 and ion-segment issue

I develop a screen


With a Tab at the top and when we click on label, we swipe and it works fine.
But when I swipe I would like that the ion segment button is selected, but event if the ngModel is correct, the button is not selected: that’s my issue :frowning:
This is the HTML code:
<ion-header [translucent]=“true”>

<ion-segment #mysegment scrollable
             mode="md" 
             [(ngModel)]="segment" 
             (ionChange)="segmentChanged()"
             value="Contact"
             >

  <ion-segment-button *ngFor="let item of segmentList" [value]="item">
    <ion-label>{{item}}</ion-label>
  </ion-segment-button> 
  
</ion-segment>

<ion-content [fullscreen]=“true” class=“ion-padding”>

<swiper (swiper)=“setSwiperInstance($event)” (slideChange)=“onSlideChange($event)” [config]=‘config’>
<ng-template swiperSlide *ngFor=‘let item of segmentList’>
{{item}}

and the TS code :frowning: import { Component, ViewChild, ViewEncapsulation, ChangeDetectorRef } from ‘@angular/core’;
import SwiperCore, { SwiperOptions, Navigation, Pagination, Scrollbar, Swiper } from ‘swiper’;
import { IonicSwiper, IonSegment } from ‘@ionic/angular’;
import { SwiperComponent } from ‘swiper/angular’;

SwiperCore.use([IonicSwiper, Navigation, Pagination, Scrollbar]);

@Component({
selector: ‘app-customers’,
templateUrl: ‘customers.page.html’,
styleUrls: [‘customers.page.scss’],
encapsulation: ViewEncapsulation.None
})
export class CustomersPage {//implements AfterContentChecked{
@ViewChild(‘mysegment’) segComponent: IonSegment;
@ViewChild(‘swiper’) swiper: SwiperComponent;
config: SwiperOptions = {
slidesPerView:1,
spaceBetween:20,
pagination:true,
loop:false
};
private segment: string;
private segmentList: Array = [‘Contact’, ‘Notes’, ‘Info’, ‘RDV’, ‘Photos’];
private slides: Swiper;

constructor(private changeDetectorRef: ChangeDetectorRef) {
this.segment = this.segmentList[0];
}

segmentChanged() {
this.slides.slideTo(this.segmentList.indexOf(this.segment));
}

setSwiperInstance(swiper) {
this.slides = swiper;
}

onSlideChange() {
this.segment = this.segmentList[this.slides.activeIndex];
console.log('slide change: ’ + this.segment);
//get the segment button
console.log(this.segComponent);
// this.changeDetectorRef.detectChanges();
}

}

I am using Ionic 5 and Angular 12.

So, I have found my mistake:
this.segComponent.value = this.segment;
in onSlideChange and it works …

truth is out there …

Thx for sharing

I still find it odd that the two way binding cannot help here

But glad there is indeed a solution

This is why I rail against multiple bindings on the same target.

When the selected segment changes, two things happen: segment gets assigned to (via your banana binding on (ngModel), and segmentChange gets called (via your ionChange handler). There is no way I know of (and even if there were, there’s no guarantee that it’ll stay consistent going forward or in different environments, so it would be folly to rely on it) to know in what order those things are going to happen.

Very true, even though in this case, looking at the code, the ionChange does not seem to touch the banana binding

So I wonder what could be the issue

I believe it does, via relying on the value of this.segment inside segmentChanged. OP has no clue whether this.segment is the “old” or “new” value in there, because the order of execution of multiple bindings isn’t specified.

1 Like