Angular 2 Animations - Transitioning between two states won't trigger

Question

I'm trying to get the example from the Angular Documentation (specifically the Transitioning between two states section) and can't get the animation to trigger. I am not getting any errors and don't understand where I'm going wrong.

Here is my code:

Html

<ul>
    <li *ngFor="let hero of heroes"
        [@heroState]="hero.state"
        (click)="toggleState()">
      {{hero.name}} - {{hero.state}}
    </li>
</ul>

TS

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

@Component({
  selector: 'app-coating',
  templateUrl: './coating.component.html',
  styleUrls: ['./coating.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee',
        transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#cfd8dc',
        transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('100ms ease-out'))
    ])
  ]
})

export class CoatingComponent implements OnInit{

  state:string;
  toggle: boolean = true;
  name: string;

  toggleState() {
    console.log('Test');
    this.toggle = !this.toggle;
    console.log(this.toggle);
    this.state = this.toggle ? 'inactive':'active';
  }

  heroes = [
    { id: 11, name: 'Mr. Nice', state: 'inactive' },
    { id: 12, name: 'Narco', state: 'active'  },
    { id: 13, name: 'Bombasto', state: 'inactive'  },
    { id: 14, name: 'Celeritas', state: 'active'  },
    { id: 15, name: 'Magneta' },
    { id: 16, name: 'RubberMan' },
    { id: 17, name: 'Dynama' },
    { id: 18, name: 'Dr IQ' },
    { id: 19, name: 'Magma' },
    { id: 20, name: 'Tornado' }
  ];

  constructor() {
   
  }
  
  ngOnInit(){}

}

Also for the the console.log, when I click on the first hero I get:

Test
true
inactive