SovietPanda SovietPanda - 1 year ago 89
TypeScript Question

custom created method error: "is not a function"

I have a list of hero-buttons with a custom animation created in

. 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
and a function called
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.


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

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

selector: 'button-collection',
template: `
<button *ngFor="let hero of heroes"
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 {
.then(heroes => this.heroes = heroes);


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

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

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

Answer Source

If you cast JSON to a TypeScript class, all is happening is that you indicat to the static analysis it can safely assume the value being of that class, that doesn't actually change the JSON value at all and also 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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download