Angular 2 not showing output on screen - angularjs

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

Answer 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.