Animation binding @

This is the documentation for Angular 6.
You can switch to the latest version Angular 7.

You can build a simple animation that transitions an element between two states driven by a model attribute.

Animations can be defined inside @Component metadata.

Then using the [@triggerName] syntax, attach the animation that you just defined to one or more elements in the component's template.

Click to change active state:
  <li *ngFor="let hero of heroes"
      [@heroState]=" ? 'active' : 'inactive'"
      (click)=" = !">
  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 AppComponent {
  heroes = [
      name: 'Superman',
      active: true,
      name: 'Batman',
      active: true,
      name: 'Aquaman',
      active: false,
Click to change active state:
  • Superman
  • Batman
  • Aquaman