# How can I switch between segments on button click?

**URL:** <https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038>\
**Category:** ionic-v3\
**Created:** [February 1, 2017, 9:49am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038 "2017-02-01T09:49:57Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![gowtham\_sk](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gowtham\_sk](https://forum.ionicframework.com/u/gowtham_sk)\
**Post date:** [February 1, 2017, 9:49am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/1 "2017-02-01T09:49:57Z")

</div>

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

Thanks

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [February 1, 2017, 10:12am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/2 "2017-02-01T10:12:00Z")

</div>

```
<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:

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

```

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

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

```

This is how I do it.

---

<div class="post-metadata">

**Author:** ![gowtham\_sk](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gowtham\_sk](https://forum.ionicframework.com/u/gowtham_sk)\
**Post date:** [February 1, 2017, 12:05pm UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/3 "2017-02-01T12:05:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [February 1, 2017, 12:09pm UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/4 "2017-02-01T12:09:30Z")

</div>

Sorry, don’t really understand your question.

---

<div class="post-metadata">

**Author:** ![gowtham\_sk](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gowtham\_sk](https://forum.ionicframework.com/u/gowtham_sk)\
**Post date:** [February 1, 2017, 12:24pm UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/5 "2017-02-01T12:24:21Z")

</div>

tabs icons are not looking like they are inactive.  
 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/6/d/6d0a65eafeaea617c93749f70c31557088147f88.png)

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 !

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [February 1, 2017, 1:10pm UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/8 "2017-02-01T13:10:31Z")

</div>

> [@Daveshirman](#):
>
> buttonClickHandler() {  
> this.selectedSection = this.sections.second;  
> }

Sorry, my mistake:

should have been:

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

```

This will fix the active styling issue you mentioned.

---

<div class="post-metadata">

**Author:** ![gowtham\_sk](https://avatars.discourse-cdn.com/v4/letter/g/5f8ce5/32.png) [@gowtham\_sk](https://forum.ionicframework.com/u/gowtham_sk)\
**Post date:** [February 1, 2017, 1:31pm UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/9 "2017-02-01T13:31:54Z")

</div>

Thanks a lot! @Daveshirman

---

<div class="post-metadata">

**Author:** ![RobertLow](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RobertLow](https://forum.ionicframework.com/u/RobertLow)\
**Post date:** [December 20, 2017, 6:52am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/10 "2017-12-20T06:52:59Z")

</div>

> [@Daveshirman](#):
>
> buttonClickHandler() {  
> this.sections.selectedSection = this.sections.second;  
> }

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

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [December 20, 2017, 9:09am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/11 "2017-12-20T09:09:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobertLow](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RobertLow](https://forum.ionicframework.com/u/RobertLow)\
**Post date:** [December 20, 2017, 9:12am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/12 "2017-12-20T09:12:39Z")

</div>

![help](https://global.discourse-cdn.com/ionicframework/original/3X/c/9/c90e9e2910fe40f417b1eba4a1c3b8e1b1786a14.png)

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.

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [December 20, 2017, 9:33am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/13 "2017-12-20T09:33:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RobertLow](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RobertLow](https://forum.ionicframework.com/u/RobertLow)\
**Post date:** [December 20, 2017, 10:24am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/14 "2017-12-20T10:24:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [December 20, 2017, 10:41am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/15 "2017-12-20T10:41:57Z")

</div>

Take a look at:

“Pushing a view” here:

> **[Ionic Framework](https://ionicframework.com/docs/api/navigation/NavController/)**
>
> Ionic is the app platform for web developers. Build amazing mobile, web, and desktop apps all with one shared code base and open web standards

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 🙂

---

<div class="post-metadata">

**Author:** ![RobertLow](https://avatars.discourse-cdn.com/v4/letter/r/c0e974/32.png) [@RobertLow](https://forum.ionicframework.com/u/RobertLow)\
**Post date:** [December 21, 2017, 4:06am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/16 "2017-12-21T04:06:39Z")

</div>

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

Home.html

```auto
<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

```auto
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

```auto
<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

```auto
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);
  }

}

```

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [December 21, 2017, 8:41am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/17 "2017-12-21T08:41:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Daveshirman](https://avatars.discourse-cdn.com/v4/letter/d/ecd19e/32.png) [@Daveshirman](https://forum.ionicframework.com/u/Daveshirman)\
**Post date:** [December 21, 2017, 8:42am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/18 "2017-12-21T08:42:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Qadir12345](https://avatars.discourse-cdn.com/v4/letter/q/ccd318/32.png) [@Qadir12345](https://forum.ionicframework.com/u/Qadir12345)\
**Post date:** [February 24, 2020, 8:46am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/20 "2020-02-24T08:46:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [February 24, 2020, 7:39pm UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/21 "2020-02-24T19:39:10Z")

</div>

> [@Qadir12345](#):
>
> i have a very simple question.

Doesn’t seem that way to me at all.

> [@Qadir12345](#):
>
> when i selected a specific value in the segment i should pass the value to another page.

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.

---

<div class="post-metadata">

**Author:** ![Qadir12345](https://avatars.discourse-cdn.com/v4/letter/q/ccd318/32.png) [@Qadir12345](https://forum.ionicframework.com/u/Qadir12345)\
**Post date:** [February 25, 2020, 2:34am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/22 "2020-02-25T02:34:16Z")

</div>

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

.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [February 25, 2020, 5:56am UTC](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038/23 "2020-02-25T05:56:19Z")

</div>

> [@Qadir12345](#):
>
> I need to get all this information in the modal page which is the final page.

I can’t make much sense out of this, but have you looked at [how to use `componentProps` to pass data to modals](https://ionicframework.com/docs/api/modal#passing-data)?

[Next page](https://forum.ionicframework.com/t/how-can-i-switch-between-segments-on-button-click/78038.md?page=2)