Add and remove classes in Angular

Question

I have a card that will appear on certain occasions. As an effect I am using the bootstrap design material to give a Zoomin. I am using ng4-clickout to when click out of my element it apply the Zoomout class and disappear with the element.

My div:

<div #cardnotificacao [exclude]="'.fa,.fa-close,.fecharnotificacao,.ml-2'" (clickOutside)="teste()" id="cardnotificacao" *ngIf="mostraNotificacoes" class="card cardnotificacoes animated zoomIn">

My function responsible for displaying this element:

  tocouSino(){

    this.mostraNotificacoes = true;

  }

The function that when you click out of this element is called:

  teste(){

    let card = this.el.nativeElement.querySelector("#cardnotificacao");
    card.classList.add('zoomOut');

  }

In the first click it works, but then when I click on the element that calls the function tocouSino(), my card is not shown. I believe it is because the zoomOut class is in that element.

I also tried to:

teste(){

    let card = this.el.nativeElement.querySelector("#cardnotificacao");
    card.classList.add('zoomOut');

    setTimeout(()=> {
      this.mostraNotificacoes = false; },1000); 
    }

That way the element appears and then disappears quickly.

I also tried to:

teste(){

    let card = this.el.nativeElement.querySelector("#cardnotificacao");
    card.classList.add('zoomOut');

    setTimeout(()=> {
      card.classList.remove('zoomOut'); },100); 

    setTimeout(()=> {
      this.mostraNotificacoes = false; },100); 
    }

But the element keeps appearing and disappearing even when I click on the element that only calls the function responsible for showing the card.

Answer 1

To those who are interested, I was able to solve in the following way:

  fechaCardNotificacoes(){

    let previewimg = this.el.nativeElement.querySelector("#cardnotificacao");
    previewimg.classList.add('zoomOut');

    setTimeout(()=>{
      previewimg.classList.remove('zoomOut');
      this.mostraNotificacoes = false;
    }, 300);
  }