custom created method error: "is not a function"

Question

I have a list of hero-buttons with a custom animation created in button.component.ts. At the beginning, they are inactive. When I press one of then, the selected one should turn active. For this, I created a field in hero.ts called state and a function called toggleState() where I change the state. But when I press the button, I receive the error:

EXCEPTION: Error in http://localhost:3000/app/button.component.js class ButtonComponent - inline template:4:10 caused by: self.context.$implicit.toggleState is not a function

My guess is that I can't create a custom method like I did here. But I'm new in Angular2 so I can't really tell it. What did I do wrong? I played enough "Where's Wally?" with my code and still I can't find anything.

button.component.ts:

import { Component, Input, OnInit, trigger, state, style, transition, animate
} from '@angular/core';

import { Hero } from './hero';
import { HeroService } from './hero.service';

@Component({
    moduleId: module.id,
    selector: 'button-collection',
    template: `
      <button *ngFor="let hero of heroes"
          [@heroState]="hero.state"
          (click)="hero.toggleState()">
        {{hero.name}}
      </button>
    `,
    styleUrls: ['heroes.component.css'],
    animations: [
        trigger('heroState', [
            state('inactive', style({
                backgroundColor: '#e1e1e1',
                transform: 'scale(1)'
            })),
            state('active', style({
                backgroundColor: '#dd1600',
                transform: 'scale(1.1)'
            })),
            transition('inactive => active', animate('100ms ease-in')),
            transition('active => inactive', animate('100ms ease-out'))
        ])
    ],
})
export class ButtonComponent implements OnInit {
    heroes: Hero[];

    constructor(private heroService: HeroService) {

    }

    ngOnInit(): void {
        this.heroService.getHeroes()
        .then(heroes => this.heroes = heroes);
    }
}

hero.ts:

export class Hero {
    id: number;
    name: string;
    state: string;

    constructor() {
        this.state = 'inactive';
    }

    public toggleState(): void{
        this.state = (this.state === 'active' ? 'inactive' : 'active');
    }
}

Answer 1

If you cast JSON to a TypeScript class, all is happening is that you indicate to the static analysis it can safely assume the value is of that class; that doesn't actually change the JSON value at all (i.e it doesn't make it an instance of that class).

What you want is probably How do I cast a JSON object to a typescript class or Cast JSON object to TypeScript class instance

Answer 2

Your service most probably only returns plain objects, meaning they don't have the member methods of the Hero class.

You need to explicitly create new Hero() objects to have the toggleState() method available on the hero object.