animate css use it on a ngIf

I have a test button like this to check if everything is working okay:

<div animates #animation="animates" text-center>
   <button ion-button (click)="animation.start({type: 'fadeOutLeft', duration: '1000'})">Click me!</button>
</div>

But what I am trying to achieve is to set this animation on an ngif I want to make the first element disappear with the fadeOutLeft animation here below the code of the ngIf

<ion-scroll scrollX="true">
   <div *ngIf="!clicked">
     <div class="availability-btn-wrapper" *ngFor="let availableDaysBtn of availableDays" (click)="getDay(availableDaysBtn)">
        <button ion-button round outline>{{ availableDaysBtn }}</button>
     </div>
   </div>
   <div *ngIf="clicked">
       <div class="availability-btn-wrapper" *ngFor="let availableTimeBtn of availableTimes" (click)="getTime(availableTimeBtn)">
           <button ion-button round outline>{{ availableTimeBtn }}</button>
       </div>
   </div>
</ion-scroll>

I want to add this animation on the first ngIf="!clicked" that it disappears with that animation hope some one could help me out

Angular Animations provide you with nice transition hooks. For your case, if you want to animate div when it's gone you should register your animation on :leave hook. Then when the expression in ngIf is executed and specific HTML is about to be hidden animation registered on :leave will be executed.

Check out this guide, and search for leave I mentioned above.