Angular6 - Animation when change value

I searched on Google how to do what I want to do and tried some things but nothing works and I found a lot of AngularJS tutorial but not Angular6.. so I hope u will be able to help me.

I want to make a fade when my array's values change (on click) so I downloaded ng-animate but it doesn't give me the behaviour I'm looking for. Currently, I've got two components so the first:

HTML:

 <div style="text-align: center; margin: 20px 0">
      <div class="buttonSelector" *ngFor="let select of buttonSelector" (click)="getSelectArray(select.title)"
           [ngClass]="{'selected': select.title === selectedArray.title.toUpperCase() }">
        <p></p>
      </div>
    </div>

    <app-infoapp [selectedArray]="selectedArray"></app-infoapp>

There, I change my selectedArray by sending a variable to getSelectArray() then I send it to my 'app-infoapp' component. On my 'app-infoapp' component, we can find this:

import {Component, Input, OnInit} from '@angular/core';
import { trigger, transition, useAnimation } from '@angular/animations';
import {bounce, fadeIn} from 'ng-animate';

@Component({
  selector: 'app-infoapp',
  templateUrl: './infoapp.component.html',
  styleUrls: ['./infoapp.component.css'],
  animations: [
    trigger('fade', [transition('* => *', useAnimation(fadeIn, {delay: 0.2}))])
  ]
})
export class InfoappComponent implements OnInit {

  @Input() selectedArray;
  fade: any;

  constructor() {
  }
}

So now when I refresh my page, the component is fading so that's cool but when I change my array by clicking on the button so another array is sent to my 'app-infoapp' component, it doesn't animate another time.

I hope I was clear and that u will be able to help me.

If you need more informations or if I wasn't clear tell me, I'll answer as fast as possible.

Thanks.