How can I switch between segments on button click?


#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.

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

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.


#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.