[Angular2 Animation] Basic animation

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

<table>
  <tr *ngFor="let course of (allCourses | async)" [@courseHover]="course.hover" (mouseenter)="course.hover=‘active‘"
      (mouseleave)="course.hover=‘inactive‘">
    <td class="column course-icon">
      <img [src]="course?.iconUrl">
    </td>
    <td class="column course-description">
      {{course.description}}
    </td>
    <td>
      <button [routerLink]="course.url">View</button>
    </td>
  </tr>
</table>