check-element inside or not with angular https://stackoverflow.com/questions/40107008/detect-click-outside-angular-component

check-element-inside.ts

//  from here:

// @HostListener('document:click', ['$event'])
  // clickout(event) {
  //   console.log("target?",event.target);
    
  //   if(this.eRef.nativeElement.contains(event.target)) {
  //     console.log("clicked inside",event);
  //   } else {
  //     console.log("clicked outside",event);
  //   }
   
  // }

// upgrade 1:

//   @ViewChild('confirm') confirm: ElementRef;
//   @ViewChild('pending') pending: ElementRef;
//   @ViewChild('statistic') statistic: ElementRef;
//   @ViewChild('notification') notification: ElementRef;

//   @HostListener('document:click', ['$event'])
//   clickout(event) {
//     let result = 
//     event.path.includes(this.confirm.nativeElement) || 
//     event.path.includes(this.pending.nativeElement) || 
//     event.path.includes(this.statistic.nativeElement) || 
//     event.path.includes(this.notification.nativeElement) 
//     console.log('includes 1 in 4 buttons?',result)
//     if(result) {
//       console.log("clicked inside",event);
//     } else {
//       console.log("clicked outside",event);
//     }
//   }

// upgrarde 2:

 @ViewChild('confirm') confirm: ElementRef;
  @ViewChild('pending') pending: ElementRef;
  @ViewChild('statistic') statistic: ElementRef;
  @ViewChild('notification') notification: ElementRef;

  @HostListener('document:click', ['$event'])
  clickout(event) {
    if (event.path.includes(this.confirm.nativeElement)) this.toogleItem(this.status.confirm)
    else if (event.path.includes(this.pending.nativeElement)) this.toogleItem(this.status.pending)
    else if (event.path.includes(this.statistic.nativeElement)) this.toogleItem(this.status.statistic)
    else if (event.path.includes(this.notification.nativeElement)) this.toogleItem(this.status.notification)
    else this.toogleItem({name:''})
  }