How to (blur) element in angular except when it's clicked in child elements

Question

How do I use blur, but not activate blur when it's clicked in the child elements? I can't trigger the click event on the li element.

<div class="select-menu">
  <div class="selected" tabindex="0" (blur)="showList = false" (click)="showList = !showList"><span>{{selected}}</span></div>
  <ng-container *ngIf="showList">
    <ul>
      <li *ngFor="let item of list; let i=index" (click)="selectItem(item, i)">
        <span>{{item}}</span>
      </li>
    </ul>
  </ng-container>
</div>

Answer 1

If you want a "click outside box must close the box" like a popup then you can register a click listener on document and determine if the click is outside of your box zone :

export class BoxComponent {

    openedBox = false;

    @ViewChild('box', { read: ElementRef }) boxRef: ElementRef;

    @HostListener('document:click', ['$event'])
    clickOutsideCurrentPopup(event: Event) {
        if (this.openedBox) {
            // if clicked outside only
            if (!this.boxRef.nativeElement.contains(event.target)) {
                this.openedBox = false; // or do whatever you want to close your box
            }
        }
        // else is already closed, do nothing
    }
}