Hi, I need to move on specific segment after page loading.
The scenario is complex: the segment buttons have been loaded at onload.
On Loading I call rest api, rest api returns data and I build segments. After defined segment array I need to move user on specific button.
<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>
It works but If there are several buttons and the button is not showed in the view because it is off the screen (for example it is it is the twentieth on the list)
I used this code to scroll manually the bar but when this block code is called, the “segment.querySelectorAll” is null.
moveToSegment(index) {
this.activeBtn = index;
var segment = document.querySelector('ion-segment');
segment.value = index;
var active = segment.querySelectorAll('ion-segment-button')[index];
if (active) {
active.scrollIntoView({ behavior: "smooth", inline: "center" })
}
}
How can I triger this code when the segment is rendered?
1 post - 1 participant