How to pass the value that I clicked to next page

Question

I am new to ionic, and I have design an ionic application, I want to pass the first page value to the second page. I will attach 2 photo to explain it more clearly.

This is the first picture

First Page

Once I clicked the white box button on the first page, I want the icon to be appear on the second page like this.

Second Page

If I click Electricity on the first page, the icon on second page will show what I clicked on the first page, the icon what you see is I hard code it. I have no idea how to make it works, does anyone know how to make it works ?

This is my code for the first page button,

<ion-col col-6 style="text-align:center;" >
  <button ion-button (click)="problem()" class="divButtonBox">
   <ion-icon class="logo-flash" name="flash"></ion-icon>
  </button>
</ion-col>

Here is the TS for problem();

problem(){
  this.navCtrl.push(ProblemPage)  
}

Here is the code for viewing second page, I hard code it because I don't know how to pass the value or string.

<ion-col col-5 style="text-align:center;">
    <ion-icon name="flash" class="logo"></ion-icon>
</ion-col>

Possible duplicate of [Share data between html pages](https://stackoverflow.com/questions/11609376/share-data-between-html-pages) — Rajesh, Oct 25 '17 at 07:50
Another one: https://stackoverflow.com/questions/23213788/how-to-pass-variable-value-between-different-html-pages-in-javascript — Rajesh, Oct 25 '17 at 07:51

score 1 · Accepted Answer · answered Oct 25 '17 at 07:58

1

This is done using ionics NavController. You can simply add optional data to the push() call:

this.navCtrl.push(ProblemPage, {
  problemType: 'electricity'
});

And you can retrieve it on the ProblemPage like this using NavParams:

export class ProblemPage {
  public problemType;

  constructor(private navParams: NavParams) {
   this.problemType = navParams.get('problemType');
  }
}

answered Oct 25 '17 at 07:58

David

7,387
3
22
39

David, thanks for answering, what if I have 6 type of parameter, how can I set it to dynamic ?? if the user does not click on the first button , but the second or last button, how the problemType become dynamic and pass the value that the user click ?? – Reggie Oct 25 '17 at 08:05
You have to pass that to your `problem()` function as a parameter. But thats very basic programming skills. You should read a few starter tutorials. – David Oct 25 '17 at 08:13
David, I know how to pass to my problem(), but every button they clicked I use it to call the problem() function, so I need to let the program know the user is clicking which button , so that the problem page can show the exact value that the user clicks. Sorry for misleading you, I did not clarify my question clearly. – Reggie Oct 25 '17 at 08:19
Okay, I solved that things. I figure it out. Thanks David !! Love you so much ! ~ – Reggie Oct 25 '17 at 08:32
I'm you could figure it out! Please be so kind and accept (or upvote) the answer if it helped you solve the problem. – David Oct 25 '17 at 08:41

How to pass the value that I clicked to next page

1 Answers1