@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>