exclude don't work

[veronesecoms]

I have one element (#informacao) that i don't need to fire the clickout event.

This is my code:

    <div [exclude]="'#informacao'" (clickOutside)="teste()" id="cardnotificacao" *ngIf="mostraNotificacoes" class="card cardnotificacoes animated zoomIn">
        <div *ngIf="temNotificacao" class="block-success"><i class="fa fa-clock-o mr-2 iconclock"></i>14:35: Seu plano foi renovado! Obrigado por utilizar o sistema. :) <i (click)="limpaNotificacao()" id="informacao" class="fa fa-close fecharnotificacao ml-2"></i></div>
        <div *ngIf="!temNotificacao" class="block-success animated fadeIn"><i class="fa fa-thumbs-o-up mr-2 iconclock"></i>Você não possui novas notificações!</div>
    </div>

I also try:

<div [exclude]="'.fa'" (clickOutside)="teste()"

and:

<div [exclude]="'.fa,.fa-close,.fecharnotificacao,.ml-2'"

But the event is triggered when i click in my i element

[dbrody]

@veronesecoms ng-click-outside seems to cache the DOM nodes that are excluded by default. It seems like there may be more efficient ways of doing this exclude check but I'll ignore that for now.

To fix this, try setting:

<... [excludeBeforeClick]="true" ...>

This will be sure to recreate the exclude list after each click ensuring that created elements (such as your element by the ngIf) is registered.

Hope that helps!

[saeed-abdul-rahim]

[excludeBeforeClick]="true" didn't help I am having a modal with ng-select where if I click the dropdown - it is considered as an outside click

[ghost]

In click outside event you can check the event target and can handle the closing functionality of the modal with it! It worked for me. For example:

if (!(event.target as HTMLElement).classList.contains('ng-option')) {
     this.closeProductsList();
}