Save input value as variable and show on label

Ionic Framework ionic-v3
1

Hi,
I am looking for a way to read the input value, save it as a variable and then show it on a label.
This is my current code (.html):

<ion-input type="text" text-right maxLength="10" placeholder="Enter Title Here"></ion-input>
<button ion-button large full color="dark">Refresh</button>
<ion-label color="dark"></ion-label>

As mentioned, for me it would be very important to save the input as a global variable I can access from every page, in this case as a string and show this variable on my label. It should refresh the label-text when I press the Refresh-button.

I would be thankfully for help,
Greetings

Robert

2

Hello @RobertLinde, You can update the label as soon as you enter something in input field and also you can update it on button click as well. I am attaching code for update on refresh button click.

In your HTML, use this code:

      <ion-input type="text" text-right maxLength="10" placeholder="Enter Title Here" [(ngModel)]="myVal"></ion-input>
      <button ion-button large full color="dark" (click)="refresh()">Refresh</button>
      <ion-label color="dark">{{myVal1}}</ion-label>

And in your .ts file, use this code:

  myVal: string = "";
  myVal1: string = "";

  refresh()
  {
  	this.myVal1 = this.myVal;
  }

Hope this will help you. Let me know if you want to update label as soon as you enter something in field.
Cheers!!!

6 Likes
3

Thanks a lot, this solves my problem!

It does not have to update as soon as I enter something in the field. The only thing that would help me to know is how I create a variable that I can use in different pages…

1 Like
4

Np. Happy to help you :slightly_smiling_face: