How to programmatically click ion-segment-button?

Ionic Framework
1

I am using @ionic/angular 5.3.1.

I am seeking a way to programmatically click an ion-segment-button. I know that I can programmatically switch segments, but I want to also trigger the switching animation. (It is a use case where the user is in the wrong segment, and I want to the program to help teach the user where they want to be. The existing animation would be perfect for this.)

The problem is that the button element lies in the shadow DOM of the ion-segment-button. It can be accessed for CSS styling through the native Shadow Part[1], but don’t think I can access it programmatically to invoke its click() method.

I see that a similar issue was addressed in Ionic 4 here https://github.com/ionic-team/ionic-framework/issues/14980. There, it was implied that my goal is achievable by “using the ‘ionSelect’ event instead of ‘click’ and setting the checked property instead of clicking.” But when I look at the docs for ion-segment and ion-segment-button, I do not see any reference to either the IonSelect event, or the checked property.

Thank you, in advance, for your help.

[1] https://ionicframework.com/docs/api/segment-button#css-shadow-parts

2

I know it’s some time ago - but maybe some other people can use this reply.

  <ion-segment scrollable>
    <ion-segment-button value="1" id="segment-1">
      <ion-label>Segment 1</ion-label>
    </ion-segment-button>
    <ion-segment-button value="2" id="segment-2">
      <ion-label>Segment 2</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3" id="segment-3">
      <ion-label>Segment 3</ion-label>
    </ion-segment-button>
    <ion-segment-button value="4" id="segment-4">
      <ion-label>Segment 4</ion-label>
    </ion-segment-button>
    <ion-segment-button value="5" id="segment-5">
      <ion-label>Segment 5</ion-label>
    </ion-segment-button>
    <ion-segment-button value="6" id="segment-6">
      <ion-label>Segment 6</ion-label>
    </ion-segment-button>
    <ion-segment-button value="7" id="segment-7">
      <ion-label>Segment 7</ion-label>
    </ion-segment-button>
  </ion-segment>

Add id’s to the segment-buttons - and grab that element, and fire a click event on it.

  select(index: number) {
    const element = document.getElementById('segment-' + (index));
    element.click();
    this.focusSegment(index);
  }

Call the above method select() programmatically / through button click event.

<ion-button (click)="select(2)">Select Segment Button 2 </ion-button>

As an added bonus, use the same behaviour for centering your ion-segment on the selected segment-button, incase you have a scrollable ion-segment with lots of ion-segment-buttons.

  focusSegment(segmentId) {
    document.getElementById('segment-' + segmentId).scrollIntoView({
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    });
  }