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
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 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.

1 post - 1 participant

Read full topic