Adding A Second Animation Using (click) Angular

Im using the library animate https://daneden.github.io/animate.css/ For adding an animation to whatever you have to add the class animate + nameOfAnimation for example I want to

Solution 1:

This example is from the link @Jan Hamara shared in the comment.

<button class="heroe-button animated fadeInLeft" (click)="addClass()"> </button>

$(".heroe-button").click(function() {
        var el = $(this);

        el.before( el.clone(true) ).remove();
    });

This will create a cloned element and then removes the original element. This way will restart the animation.

Solution 2:

I think adding jquery to angular would be a bad idea, why not make use of ngClass

[ngClass]="{'style1': isClass1Visible, 'style2': isClass2Visible}"

So in your code it would be like:

<button class="heroe-button animated" [ngClass]={'fadeInLeft': isVisible, 'fadeOutLeft': !isVisible} (click)="changeVisibility()"> </button>

changeVisibility() {
     //Change isVisible variable
}

More documentation on ngClass over here: https://angular.io/api/common/NgClass