Programmatically change ion-segment-button

I have a classic ion-segment bar with horizontal scrolling. The items are several and not all are visible.

When I open the page, I need to move on specific segment. I’d like to emulate animation and scrolling.

<ion-segment [(ngModel)]="tabList" scrollable color="dark">
        <ion-segment-button *ngFor="let level of levels ; let i=index" [value]="level.roundLevel" [id]="level.roundLevel" (click)="changeTab(i,level, $event)" [class.segment-button-checked]="activeBtn == i">
            {{level.label}}
        </ion-segment-button>
    </ion-segment>

I use ionic 5.

In ionic 3 I implemented this scenario using this code:

    <ion-scroll #scroll scrollX="true" scrollY="false">
      <p *ngFor="let level of levels ; let i=index" [id]="level.roundLevel" (click)="changeTab(i,level, $event)"
        [ngClass]="{active: activeBtn == i}" [class]="'level'+i">
        {{level.label}}
      </p>
    </ion-scroll>

  scrollToRight(index) {
    if (this.Scroll) {
      let width = (this.Scroll._scrollContent.nativeElement.offsetWidth) / 3;
      let offset = width * index;
      this.Scroll._scrollContent.nativeElement.scrollTo({ left: offset, behavior: 'smooth' });
    } else {
      console.log("Scroll undefined")
    }
  }

Could you please help me to implement for ionic5?

Thanks

1 post - 1 participant

Read full topic