[CLOSED] How to when click on a button and navigate to the desire segment

Ionic Framework ionic-v3
1

Greetings to you, Currently I would like to click on a button in page 1, and it will navigate to page 2 with the right segment selected.

Have been looking on the forum and document but still no idea on how to go about. Really need help thankyou.

Thank you in advance.

help
help.png994×642 3.35 KB

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

}
1 Like
2

Hey @RobertLow , Did you find a solution for this? Have the Same Issue.