Ok so after a little research I found a video that explains how to use Animate.css using jQuery and using the function that he explains with the click event I managed to take out the first animation class, add the second one and once the animations ends, take out the second animation class and add again the first animation class, all of this in the TS file, have some problems coding the jQuery in the TS file but the framework helps me out with the correct form of the code

So first in my <input> I added the class offMenu to identify my input, also I leave the animate__animated so I dont have to add it every time I take out or add an animation class and also I leave the animate__slideInLeft because I want to animate the input the first time ther page loads.

<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft offMenu" id="offMenu">

Next in my TS file in the constructor part I code the jQuery function, I create 3 variables:

• The first one is effects this variable saves the second effect that is animate__bounceOutRight.
• The second variable is effectsEnd that saves the different classes that Animate.css have to detect when the animation ends for the different browsers.
• And the third one is to save the element I want to add or remove classes, in this case is my input with the class offMenu.
• If you want to add one more variable to save the animate class you currently have, you can do it.

Next I select the element I want to add and remove classes and call the event on click once again in the function I select the element and remove the firts animate class 'animate__slideInLeft' as this animation already end theres no need to add the effectsEnd variable, next I add the second animation class that is saved in my variable effects, then with one we indicate this is going to happen one time and check fot the animation to end with the variable effectsEnd once the animation ends, we remove the animation class effects and add the firt animation class.

    constructor() {   
        $(() =>{

      var effects = 'animate__bounceOutRight';
      var effectsEnd = 'animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd';
      var element = $('input.offMenu');

      $(element).on("click", () => {

        $(element).removeClass('animate__slideInLeft').addClass(effects).one(effectsEnd, () =>{
            $(element).removeClass(effects).addClass('animate__slideInLeft')
          });
      });
    })
  }

Whit this code you can put one animation to show when the page is load and then add another animation when you click in the element and take back the element once the out animation is done, hope this helps someone else.

Did you add the animate.css styles in your

angular.json

"styles": [
    "node_modules/animate.css/animate.css"
  ],

OR

styles.css:

@import '~animate.css/animate.min'

Also just for a better approach let's try to do tackle your problem the Angular way

In your .ts create a boolean field named activateAnimation and we'll set it as true when the user clicks the image so your .ts code will look something like this:

  activateAnimation: boolean;
    
  animateLogo(): void {
     this.activateAnimation = true
  } 

and then in your HTML we can conditionally add the animate.css classes that you want to add using the [ngClass] directive of Angular.

<input type="image" src="../../../assets/img/as-logo-150dpi-05.png"
    class="d-block animate__animated animate__slideInLeft"
    [ngClass]="{'animate__animated ': activateAnimation , 'animate__bounceOutRight': activateAnimation }" id="offMenu"
    (click)="animateLogo()">```