Trigger CSS class (animation) on click in Angular application

I am working with an Ionic-Angular app, which has some buttons with CSS animations attached to them. Currently, the code looks as below, and everything works perfectly:

Current HTML/CSS

<div class="l-button">
    <a href="#" class="m-button -primary"></a>
</div>

.m-button:active,
.m-button:hover {
  text-decoration: none;
}
.m-button:active {
  box-shadow: 0 0.0625rem 0 0 #ccc;
  transform: scale(0.975);
}
.m-button.-primary {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background-color: #eb5505;
  color: #fff;
  box-shadow: 0 0.3125rem 0 0 #c93e00;
}
 .m-button.-primary:active {
   text-decoration: none;
   box-shadow: 0 0.125rem 0 0 #ccc;
   transform: scale(0.975);
 }

But for some reason (screen flickering on iOS when sliding during the hover on the button), I want to remove the animation from :active styles and make it run on click, as it looks to be a reason for the issue. I've made a new CSS class and tried to do it using the code below, but the animation isn't working anymore. What is wrong, and maybe there is some better solution to make it possible?

New HTML/CSS

<div class="l-button">
    <a href="#" (click)="clickEvent()" [ngClass]="btnStatus ? '-run-animation' : ''" class="m-button"></a>
</div>

.-run-animation {
  text-decoration: none;
  box-shadow: 0 0.125rem 0 0 #ccc;
  transform: scale(0.975);
}

TS

btnStatus: boolean = false;
clickEvent() {
  this.btnStatus = !this.btnStatus;
}

Great thanks in advance!