How to manually trigger ion-segment animation

I am using ion-segment with Angular and Swiper.
I want to trigger the ion-segment change animation while swiping.
Tried with javascript click() method, ngModal and Viewchild.
But i can only change the detail.value of the ion-segment.
Then the correct button is highlighted/checked but there is no change animation.

would the swipeGesture property be of any good for you?

swipeGesture is just for swiping the segment while holding the finger on it.
I use swiper for swiping the whole site. It’s working fine.
I change the segment value while swiping with an swiper onSlideChange event.
Then the correct ion-segment-button will be selected.
But there is no animation change effect of the ion-segment.
Don’t know how to do that.

I was just checking the segment source code and there seems to be a class change assigned when the click happens. I guess that triggers the animation

Problem may be that it is(?) a shadow component so any outside action cannot change css class

Would have to try to verify

Yes, that is what i meant. I read about shadow DOM.
Don’t know how i can trigger this class change.
Would be nice if you could try it.

So this is probably not going to be possible with how segments work. The animation is not JS based, so you don’t really have a hook into it.

Your best bet is to customize segments and build that indicator yourself.

1 Like