Gowtham Gowtham - 4 years ago 383
TypeScript Question

Switch segments on button click in ionic v2

I'm trying to create multi page forms using segment. I tried searching for examples but couldn't find any.

This is how my multi page form looks like now,
page-1

enter image description here

My question is how can I switch to next segment on button click(in my case its the next button which should make the user go to next segment). Thanks in advance!

Answer Source

You can do something like this:

    <div [ngSwitch]="Segments">
        <div *ngSwitchCase="1">
            SEGMENT CONTENT
            <button ion-button (click)="Segments = 2">NEXT</button>
        </div>
        <div *ngSwitchCase="2">
            SEGMENT CONTENT
            <button ion-button (click)="Segments = 3">NEXT</button>
        </div>
        <div *ngSwitchCase="3">
            SEGMENT CONTENT
            <button ion-button (click)="Segments = 4">NEXT</button>
        </div>
        ...
    </div>

    <ion-segment [(ngModel)]="Segments">
        <ion-segment-button value="1">
            1 >
        </ion-segment-button>
        <ion-segment-button (ionSelect)="Segments = 2" value="2">
            2 >
        </ion-segment-button>
        ...
    </ion-segment>

And then use a formBuilder for validation and getting all the data from the segment fields. Hope it helps

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download