clickOutside event is still registered from within ngIf

[rpeelenconclusion]

See code below. As soon as the click event is triggered on the video, the clickOutside event is triggered right after, closing it again. Not sure if it's a bug with angular or with this.

<div class="video"
  (click)="isOpen = true">
  <img src="assets/images/video-home.jpg"/>
  <svg>
    <use xlink:href="assets/svg/symbol-defs.svg#play-btn"></use>
  </svg>
</div>

<div class="popup -video"
  *ngIf="isOpen">
  <div class="container">
    <div class="content"
        (clickOutside)="isOpen = false">
      <span class="close" (click)="isOpen = false"></span>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/D2JPAnan13M?autoplay=1" frameborder="0" allowfullscreen>
      </iframe>
    </div>
  </div>
</div>

[arkon]

attachOutsideOnClick might help here. I'll take a deeper look later though.

[alexandremoore]

I just had the same problem here. I also tried to put the (clickOutside) event inside a but same result, the event is always triggered right after.

[arkon]

Can you try using the [delayClickOutsideInit] option that I added in v2.4.0?

[rpeelenconclusion]

Will try next week, I fixed it for now by adding an ID to the trigger and exclude that. Bit hacky, but it works

[alexandremoore]

I just tried using [delayClickOutsideInit] and now, the clickOutside event is no longer triggered.

[alexandremoore]

The workaround suggested by @rpeelenconclusion works for me as well.

[arkon]

Whoops, made a dumb mistake. @alexandremoore Can you try it with v2.4.1?

[alexandremoore]

@arkon, it works with v2.4.1, thanks!

[NikolaJankovic]

I'm having an issue with this, applying the [delayClickOutsideInit] property hasn't solved the issue.

<div (clickOutside)="inputOpen=false" [delayClickOutsideInit]="true" class="filter-input-container">
  <div
    (click)="inputOpen = !inputOpen"
    [class]="inputOpen ? 'placeholder-container placeholder-container--selected' : 'placeholder-container'">
    <span>Size</span>
  </div>
  <div *ngIf="inputOpen" class="values-container">
    <div class="filter-checkbox" *ngFor="let size of sizesResolved" (click)="addSize(size)">

      <div class="filter-checkbox--checked" *ngIf="activeSizes?.indexOf(size) > -1" >
        <svg ... svg>
        <span class="filter-checkbox__text">{{ size }}</span>
      </div>

      <div class="filter-checkbox--unchecked" *ngIf="activeSizes?.indexOf(size) == -1" >
        <svg ... svg>
        <span class="filter-checkbox__text">{{ size }}</span>
      </div>

    </div>
  </div>
</div>

Clicking just outside of the conditional element works but anything inside of it incorrectly triggers the clickOutside event.

[OlegGranevskij]

Looks like this issue is still not resolved. I still have same problem with conditional element andclick event.

[kiknadze]

I found this solution and it works for me

<div class="video" (click)="isOpen = true; $event.stopPropagation()">