Angular 2 not showing output on screen

Question

Since I have begin to learn Angular 2 , I am following the basic concepts well. But when I tried running the below program, I don't get the values which is statically set in the code.

import { Component,Input } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
hero: Hero = {
  id: 1,
  name: 'Windstorm'
};

@Component({
  selector: 'my-app',
 template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

})
export class AppComponent {
  title = 'Tour of Heroes';
  hero = 'Windstorm';
}

Can someone please point out where I am wrong, also can someone show how to debug the Angular code so that I can learn the framework well and try complex things out by self-learning and solve out basic issues by myself?

The output which I got

Günter Zöchbauer · Accepted Answer · 2016-12-22 10:52:34Z

1

This should work

@Component({
  selector: 'my-app',
 template: '<h1>{{title}}</h1><h2>{{hero.name}} details!</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'

})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

With hero = 'Windowstorm'; {{hero.name}} is invalid because hero doesn't have a name property. I'm sure your browser console show an error message. Please add such errors to future questions.

answered Dec 22, 2016 at 10:52

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

Nilesh Over a year ago

I am sorry but the console didn't show up anything.Its clear.

Günter Zöchbauer Over a year ago

Sorry, you are right. It would only cause an error if hero had been null. It's still helpful to state if questions state whether the console did show errors or not ;-)

Nilesh Over a year ago

Just out of curiosity why would externalizing her class not give me out.Even if the change the hero key to some other name in AppComponent?

Günter Zöchbauer Over a year ago

Not sure I fully understand the question. Bindings in templates can only refer to properties of the components class instance. hero: Hero = { id: 1, ...} is outside the class and out of reach for the template, thus {{hero}} binds to hero = 'Windstorm';.

Nilesh Over a year ago

Sure I get it. Will learn how to make it in scope by reading some more facts.Thanks for the answer..Cheers.

Collectives™ on Stack Overflow

Angular 2 not showing output on screen

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related