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?

does this.restaurant = ... instead of var restaurant work? you want the value to be a property of the controller, not just a random variable... — Claies
– Claies, Commented Dec 31, 2017 at 4:19

Sachila Ranawaka · Accepted Answer · 2017-12-31 11:55:53Z

6

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);

edited Dec 31, 2017 at 11:55

answered Dec 31, 2017 at 4:19

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2864740 Over a year ago

Minor edits: variables != properties/fields/members.

Jeffrey · Accepted Answer · 2017-12-31 04:20:48Z

5

restaurant is defined in the constructor scope, not as an instance variable. As such, Angular has no access to the variable. You need to modify your code to match this general format that defines a public instance variable bar, and then assigns a value to it inside of its the Foo class constructor.

export class Foo() {
     public bar: string;

     constructor() {
         this.bar = 'a string';
     }
}

Here's the TypeScript handbook section on variable declarations. It might be worth a read.

answered Dec 31, 2017 at 4:20

Jeffrey

1,2812 gold badges16 silver badges31 bronze badges

1 Comment

user2864740 Over a year ago

Note that, according to the TypeScript documentation linked, variables are not members! Here is the TypeScript overview of classes: members = properties + methods (+ constructor), but not variables (as defined with var or let or parameters).

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related