change-events are not recognized

Question

I have different lists and I want to navigate to them with a segment. So that would be navigating about clicking the segment button. But I also want to navigate about sliding the list. Im doing that with slides. So logically when I click the button the slide should switch to the slide with the corresponding segment button and the active-index of the segment should update when sliding. But somehow these two mechanism are not interacting correctly. Because when im clicking the button the slide doesn't change, and when Im sliding the active index of the segment doesn't change. When I want to console log the two func. I notice that they are never called. Why is that? Here is my code:

html:

  <ion-toolbar>
        <ion-segment mode="md" [(ngModel)]="segment" (ionChange)="segmentChanged()">
            <ion-segment-button value="0">
            </ion-segment-button>
            <ion-segment-button value="1">
            </ion-segment-button>
            <ion-segment-button value="2">
          </ion-segment-button>
        </ion-segment>
    </ion-toolbar>

    <div>
        <ion-slides #slides (ionSlideDidChange)="slideChanged()" scrollbar="false">
            <ion-slide>   

                <ion-list>
                    <ion-card>
                    </ion-card>
                </ion-list>
            </ion-slide>

            <ion-slide>
                <ion-list>
                   <ion-card>
                   </ion-card>
                </ion-list>
            </ion-slide>

            <ion-slide>
                <ion-list>  
                    <ion-card>
                    </ion-card>
                </ion-list>
            </ion-slide>
        </ion-slides>  
    </div>

ts:

  @ViewChild('slides', { static: true }) slider: IonSlides;
...
 async segmentChanged() {
    await this.slider.slideTo(this.segment);
    console.log(1)
  }

  async slideChanged() {
    this.segment = await this.slider.getActiveIndex();
    console.log(2)
  }

Neha Shah Neha Shah · Accepted Answer · 2020-03-09T06:03:42

This will help you out.

    <ion-segment [(ngModel)]="segments" color="primary">
        <ion-segment-button value="topSeller">Top Seller</ion-segment-button>
        <ion-segment-button value="deals">Deals </ion-segment-button>
        <ion-segment-button value="mostLiked"> Most Liked</ion-segment-button>
      </ion-segment>




    <div class="module" [ngSwitch]="segments">
    <ion-slides slidesPerView=2.2 spaceBetween=10 *ngSwitchCase="'topSeller'" (ionSlideDidChange)="slideChanged1()">
      <ion-slide *ngFor="let p of tab1">

      </ion-slide>
    </ion-slides>


// Do same for other two case as well

    <ion-slides slidesPerView=2.2 spaceBetween=10 *ngSwitchCase="'deals'" (ionSlideDidChange)="slideChanged2()">
      <ion-slide *ngFor="let p of tab1">

      </ion-slide>
    </ion-slides>


    <ion-slides slidesPerView=2.2 spaceBetween=10 *ngSwitchCase="'mostLiked'" (ionSlideDidChange)="slideChanged3()">
      <ion-slide *ngFor="let p of tab1">

      </ion-slide>
    </ion-slides>
</div>

In Ts file

slideChanged1() {
    console.log(this.segments);
  }
slideChanged2() {
    console.log(this.segments);
  }
slideChanged3() {
    console.log(this.segments);
  }

change-events are not recognized

1 Answers