Using Angular, how can I output a variable to HTML?

Question

Using Angular, I'm trying to pass a local variable from constructor the into the HTML.

Here is my TS:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-random',
  templateUrl: 'random.html'
})
export class RandomPage {

  constructor(public navCtrl: NavController) {

    var restaurants = [
    'Restaurant1',
    'Restaurant2',
    'Restaurant3'
  ];

    var restaurant = restaurants[Math.floor(Math.random()*restaurants.length)];
    console.log(restaurant);
  }

}

Here is my HTML:

<ion-content padding>
  <ion-item>
    {{restaurant}}
  </ion-item>
</ion-content>

restaurant is being logged when the constructor fires. I'm just not sure how to display it in the HTML. What am I missing?

Answer 1

You can't bind var variable to the html (because it's not a property!). Create a string variable and bind that into the html. The this keyword is used to access the property inside the component.

export class RandomPage {
  restaurant: string;

  constructor(public navCtrl: NavController) {

   var restaurants = [
    'Restaurant1',
    'Restaurant2',
    'Restaurant3'
  ];

  this.restaurant = restaurants[Math.floor(Math.random()*restaurants.length)];
  console.log(this.restaurant);