Angular encapsulation and click-outside directive

Question

Problem: I need add a way to bind and close sidebar menu if user click outside that.

I've create a directive (Something like found on this) that check if click is bind outside my element, but when user click exactly on my font-awesome icon on sidebar, it's considered a outside click and menu is not opened (The directive is works good, I checking it clicking on button padding)...

I guess it's a problem on my directive caused by angular encapsulations...

My code:

<aside [ngClass]="{'open': menuStatus}" (clickOutside)="menuStatus = false">
    <button (click)="menuStatusToggle()">
        <fa-icon [icon]="['fas', 'bars']" *ngIf="!menuStatus"></fa-icon>
        <fa-icon [icon]="['fas', 'times']" *ngIf="menuStatus"></fa-icon>
    </button>
    (Menu Content...)
</aside>

Bind event:

@HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {

    // Variable content always false when click on icon of _elementRef
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);

    if (!clickedInside) {
      this.clickOutside.emit(null);
    }
  }

Someone have a suggestion? Encapsulation is really a problem?

Hum, I will check if change document to body works. @Edit Not work... I will preserve listener on document so — Paulo Martins, Sep 18 '18 at 22:34

ConnorsFan · Accepted Answer · 2018-09-19T01:44:55.417

To make sure that the font-awesome icon does not catch the click event, define the following style in the component CSS:

fa-icon {
  pointer-events: none;
}

With that style attribute, the button receives the click event, which can then be handled correctly.

See this stackblitz for a demo.

An alternative solution is to handle the click event on the host element, and to stop the propagation. As a consequence, all the click events reaching the document are outside the host element:

@HostListener('click', ['$event'])
public onHostClick(event: Event) {
  event.stopPropagation();
}

@HostListener('document:click', ['$event'])
public onDocumentClick(event: Event) {
  this.clickOutside.emit(null);
}

See this stackblitz for a demo.

Thx so much ;D. This was easily resolved once add your css rule. — Paulo Martins, Sep 19 '18 at 14:29

score 0 · Answer 2 · answered Sep 18 '18 at 23:18

You need a correction on the parameter on your onClick function, it should be like:

@HostListener('document:click', ['$event.target'])
public onClick(event) {

  const clickedInside = this._elementRef.nativeElement.contains(event.target);

  if (!clickedInside) {
    this.clickOutside.emit(null);
  }
}

Angular encapsulation and click-outside directive

2 Answers2