How can I switch between segments on button click?

Ionic Framework ionic-v3
1

I want to switch between segments on button click. Any idea how I can achieve this on ionic 2?

Thanks

2 
<ion-segment [(ngModel)]="sections.selectedSection">
  <ion-segment-button value="{{sections.first}}">
      First section
  </ion-segment-button>
  <ion-segment-button value="{{sections.second}}">
      Second section
  </ion-segment-button>
</ion-segment>

Then in your class define the sections object:

public sections: any = {
   first: 'first',
   second: 'second',
   selectedSection: ''
};

Then just change the selected section in your button click e.g.:

buttonClickHandler() {
    this.selectedSection = this.sections.second;
}

This is how I do it.

3

Thank you so much! It is working but is there a way we can change “isActive” attribute’s value in the same click function? @Daveshirman

4

Sorry, don’t really understand your question.

5

tabs icons are not looking like they are inactive.
image

It is now hard for me to show the active segment to the user. Could you please tell me how you managed to resolve this? Thanks @Daveshirman !

8

Sorry, my mistake:

should have been:

buttonClickHandler() {
    this.sections.selectedSection = this.sections.second;
}

This will fix the active styling issue you mentioned.

9

Thanks a lot! @Daveshirman

10

Hi if I follow your method, however, by button was on a previous page. How do I go about? I am using lazy loading

11

Not sure what you mean. But sounds like you want to use Events. Look them up in the Ionic API docs.

12

help
help.png1143×696 3.66 KB

Something like on page 1 having 2 buttons. So when I click on “2” button it will link me to another page with segment 2 selected.

Thankyou in advance.

13

Ah yes, so you should pass in a parameter with the segment value you want
to your next page that loads up, and just use that parameter to set the
current segment value.

That’s exactly what I’ve done as I did the same as you in some cases.

1 Like
14

Could you teach me how to do it sorry, am really new to programming.

15

Take a look at:

“Pushing a view” here:

It shows you how to push a new ‘Page’ onto the stack with parameters.

Then just assign that parameter to the segment value from my example above
in this thread.

I haven’t got time to teach you programming! Read the docs / download the
Ionic starter tutorial app and see how it works by playing with it, you’ll
get all you need from that :slight_smile:

16

Hi, This is what I come up with what am I missing? Sorry to disturb you.

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <button ion-button (click)="navigateTo1()">1</button>
    <button ion-button (click)="navigateTo2()">2</button>
</ion-content>

Home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HomePage');
  }

  navigateTo1(){
    this.navCtrl.push('SegmentPage', {param1: '1'});
  }
    
  navigateTo2(){
    this.navCtrl.push('SegmentPage', {param1: '2'});
  }

}

Segement.html

<ion-header>
  <ion-navbar>
    <ion-title>segment</ion-title>
  </ion-navbar>
  <ion-toolbar>
  <ion-segment [(ngModel)]="status">
  
  <ion-segment-button value="1">1</ion-segment-button>
  <ion-segment-button value="2">2</ion-segment-button>

   </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content [ngSwitch]="status">
    <ion-grid *ngSwitchCase="'1'">
            <ion-row>
                <ion-col>
                    <div>
                        <p>This is page 1</p>
                    </div>
                </ion-col>
            </ion-row>
    </ion-grid>

    <ion-grid *ngSwitchCase="'2'">
        <ion-row>
            <ion-col>
                <div>
                    <p>This is page 2</p>
                </div>
            </ion-col>
        </ion-row>
</ion-grid>


</ion-content>

Segment.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-segment',
  templateUrl: 'segment.html',
})
export class SegmentPage {
  
  parameter1: any;
  status: any = this.parameter1;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.parameter1 = navParams.get('param1'); 
  }

  //status: any = this.parameter1;

  ionViewDidLoad() {
    console.log('ionViewDidLoad SegmentPage' + this.parameter1);
  }

}
17

Firstly, your push lines are wrong: you don’t need quotes around the page
name, and your object doesn’t appear formatted correctly either. Also I
can’t see where you’ve imported the page component at the top at all.

Secondly, in your next page, I don’t know what you’re doing two variables.
Just store the incoming param value into status and in your ngSwitch lines,
just put an inline condition e.g status == 2

18

Ignore comment about the param object, it’s fine, misread.

20

i have a very simple question.

<ion-segment [(ngModel)]=“pet” (ionChange)=“onSegmentChange($event)”>

<ion-segment-button value="takeway">

Take Away

</ion-segment-button>

<ion-segment-button value="dinein">

  Dine in

</ion-segment-button>

when i selected a specific value in the segment i should pass the value to another page.

any help will be appreciated.
Thankyou

21

Doesn’t seem that way to me at all.

Why do you need to do this? What other places might be interested in this information? When and how is “another page” activated? How persistent is this selection? What other places might change it?

Your question is actually extremely broad and has no single “one size fits all” answer.

22

I need to get all this information in the modal page which is the final page.
no other places are effected from this

.

23

I can’t make much sense out of this, but have you looked at how to use componentProps to pass data to modals?