Tenho uma card que vai aparecer em determinadas ocasiões. Como efeito estou usando o material design bootstrap para dar um ZoomIn. Estou usando o ng4-clickout para quando clicar fora do meu elemento ele aplicar a classe ZoomOut e sumir com o elemento.
Minha div:
<div #cardnotificacao [exclude]="'.fa,.fa-close,.fecharnotificacao,.ml-2'" (clickOutside)="teste()" id="cardnotificacao" *ngIf="mostraNotificacoes" class="card cardnotificacoes animated zoomIn">
Minha função responsável por mostrar esse elemento:
tocouSino(){
this.mostraNotificacoes = true;
}
A função que quando clica pra fora deste elemento é chamada:
teste(){
let card = this.el.nativeElement.querySelector("#cardnotificacao");
card.classList.add('zoomOut');
}
No primeiro clique funciona, porém depois quando clico no elemento que chama a função tocouSino(), o meu card não é mostrado. Acredito que seja porque a classe zoomOut esteja nesse elemento.
Também tentei:
teste(){
let card = this.el.nativeElement.querySelector("#cardnotificacao");
card.classList.add('zoomOut');
setTimeout(()=> {
this.mostraNotificacoes = false; },1000);
}
Dessa maneira o elemento aparece e depois some rapidamente.
Também tentei:
teste(){
let card = this.el.nativeElement.querySelector("#cardnotificacao");
card.classList.add('zoomOut');
setTimeout(()=> {
card.classList.remove('zoomOut'); },100);
setTimeout(()=> {
this.mostraNotificacoes = false; },100);
}
Mas o elemento continua aparecendo e sumindo mesmo quando eu clico no elemento que só chama a função responsável por mostrar o card.