@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'))    ])  ]})

Animation start in 'trigger' function. Give a name call 'courseHover'.

Animation also define 'state', and using 'transition' to animte the state.

     
        
       
            
          
            
      {
    {course.description}}    
            
      View    
         
      
     

So when mouse enter and mouse leave we set 'course.hover' to 'active' or 'inactive'.

[@courseHover]="course.hover"

Apply 'courseHover' animation acoording to the 'course.hover'.