clickoutside event is raised for component that is not in dom by ngIf

[shahafal]

i added ng-click-outside version ^3.2.0 to my project.
i have a component which is hidden with *ngIf.
i added (clickOutside)="close()" to the first element inside the component.
i am having the following issue:

in the parent component when i click on a link to display the child component (changes *ngIf from false to true) i see that the clickOutside event gets fired even before the child component itself is visible. and because when clickOutside is fired it raises a method that closes the child component - it disappears before it ever appears.

here is my code:
parent component:

<a (click)="showSearchBox=!showSearchBox">search</a>
<search-box *ngIf="showSearchBox" (toggle)="showSearchBox=false"></search-box>

child component:

<section class="search-wrapper" (clickOutside)="close()">
...
</section>

child typescript class:

close() {
   this.toggle.emit();
}

versions of packages i am using (from ng --version):

Angular CLI: 1.6.4
Node: 7.2.1
OS: darwin x64
Angular: 5.2.0
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

@angular/cli: 1.6.4
@angular-devkit/build-optimizer: 0.0.37
@angular-devkit/core: 0.0.24
@angular-devkit/schematics: 0.0.45
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.4
@schematics/angular: 0.1.12
typescript: 2.6.2
webpack: 3.10.0

[shahafal]

sorry i now see this is actually the same as issue #13 ( clickOutside event is still registered from within ngIf).

adding delayClickOutsideInit solved this.

<section (clickOutside)="close()" [delayClickOutsideInit]="true">
...
</section>

[edmarcoslins]

Perhaps the comportament is correct, @shahafal .
When click and the directive *ngIf remove the item, at the exact momment your action not is more in component. I solved with setTimeout(() => {my condition}, 10);