Angular 2 Error during evaluation of "click" following the tutorial

Question

I was following this part of the tutorial for AngularJS 2, but when I try to select a "hero" element from the list I receive errors like:

EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: l_context.onSelect is not a function

This is the part of the template with the click binding:

<ul class="heroes">
   <li *ngFor="#hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
      <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

and this is the class AppComponent where I define the onSelect function:

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero: Hero;

  onSelect(hero: Hero) { this.selectedHero = hero; }
}

I even tried to copy the code exactly how it is in the tutorial but still receive the errors. What's wrong?

Answer 1

your Code works fine for me here is working plunkr using your code:

http://plnkr.co/edit/vbinFbGtB7oRoW8cJHwb?p=preview

i assumed heros as object like this,

heroes = [{'id':1,'name':'pardeep'}, {'id':2,'name':'jain'}];

Yes as said by @eric in comment make sure your HTML file load by AppComponent, secondly make sure your typescript file compiled properly.