Add and remove classes in Angular

Question

Add and remove classes in Angular

Navigation

#1 by (1 votes)

0

I have a card that will appear on certain occasions. As effect I am using the bootstrap design material to give a ZoomIn. I'm using ng4-clickout so when I click outside my element it will 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 role responsible for showing this element:

  tocouSino(){

    this.mostraNotificacoes = true;

  }

The function that when you click away from this element is called:

  teste(){

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

  }

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

I've also tried:

teste(){

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

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

In this way the element appears and then disappears quickly.

I've also tried:

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 continues to appear and disappear even when I click on the element that only calls the function responsible for displaying the card.

html css typescript angular

asked by anonymous 14.09.2018 / 13:37

1 answer

replace the external image embedded by the user with the new version of the local host Working with two different "remotes" with git

score 1 · Accepted Answer

Who cares, I managed to solve it like this:

  fechaCardNotificacoes(){

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

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