How to show stored user input on the screen

Ionic Framework ionic-v3
1

Hi, I am just starting with Ionic (and app development generally), and I got stuck on the following issue:

  1. On one page, user inputs data (name of a goal):

.html file:

<ion-item>
    		<ion-label floating>Goal name</ion-label>
    		<ion-input type="text" max=10 [(ngModel)]="NewGoal.goalname" name='goalname'></ion-input>
</ion-item>

.ts file:

export class NewGoalPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
  }


  NewGoal = { goalname:' '};
  setGoal () {
    this.storage.set("myGoal", this.NewGoal.goalname);
  }

}
  1. And then on a different page I want to show the stored goal name when user clicks a button “Get goal”:
    .ts file:
getGoal () {
    this.storage.get('myGoal').then((goal)=> {
      console.log(goal);
    });

I call this method on the button click, and it definitely works because I can see the user-input string in the console when testing with the “ionic lab” (ie. the storage is set-up correctly). I just have no idea on how to display the same value on the page - what do I need to include in the HTML file?

I would appreciate any tips or links.

Thank you

2

you need include a variable in your ts file:

public myGoal:string = "";

getGoal () {
    this.storage.get('myGoal').then((goal)=> {
      this.myGoal = goal;
      console.log(goal);
    });

and display that variable in your html page:

<ion-input [ngModel]="myGoal"></ion-input>
3

IHi

I suggest you to go through angular.io tutorial to learn some basica about template binding.

And if you seek ways to pass data from one page to another, read the docs on navcontroller and modalcontroller on ionic

The first will jumpstart you into angular coding heaven which is a prerequisite to good ionic usage

Tom

4

Thank you very much for your help!

1 Like
5

Thank you, I will definitely do that. I am slowly going through all the docs, but guess I did not connect the dots yet…