How to insert string variable to html

Question

I want to add a string variable from ionic/storage to html.

home.ts

export class HomePage {
  @ViewChild('username') uname;

  constructor(public navCtrl: NavController, public alertCtrl: AlertController, public strg: Storage) {

  }
  signIn() {
    this.strg.set('uname', this.uname.value);
    this.navCtrl.push(Page1Page);
  }
}

page1.html

<ion-content padding>
<p>Welcome to this app, /**I want to add the uname here**/ </p>
</ion-content>

How would I go about assigning the string from ionic/storage using the page1.ts?

Answer 1

You can simply fetch your username from @ionic/storage again like this:

page1.ts

username: string;

constructor(public strg: Storage) {
    this.username = this.strg.get('uname');
}

page1.html

<ion-content padding>
    <p>Welcome to this app, {{username}}</p>
</ion-content>

This {{username}} expression is called One-Way-Data-Binding. So every time you change the username variable in your Page1Page class, the template page1.html will automatically update.