I would like to know whenever click is triggered inside parent div #menu, irrelavant of html tags exists inside it.

nativeElement.parent didn't worked for me.

HTML code:

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

 <div class="menu" *ngIf="isMenuOpen" #menu>
    <div>
      I'm the menu. Click outside to close me
    </div>
    </div>

Angular script:

this.renderer.listen('window', 'click',(e:Event)=>{

        if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
            this.isMenuOpen=false;
        }
    });

This is not working.

I would like to know whenever click is triggered inside parent div #menu, irrelavant of html tags exists inside it.

nativeElement.parent didn't worked for me.

HTML code:

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

 <div class="menu" *ngIf="isMenuOpen" #menu>
    <div>
      I'm the menu. Click outside to close me
    </div>
    </div>

Angular script:

this.renderer.listen('window', 'click',(e:Event)=>{

        if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
            this.isMenuOpen=false;
        }
    });

This is not working.

• javascript
• angular
• angular7

2 Answers 2

Add Host to component meta tag.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    "(window:click)": "onClick()"
  }
})

stopPropagation()

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

toggleMenu($event) {    
    $event.stopPropagation();
    this.isMenuOpen = !this.isMenuOpen;
  }

  onClick() {
    this.isMenuOpen = false;
  }

Example:https://stackblitz.com/edit/angular-oenkbw

you can reset menus state by listen to document click event in that case any click event in the menus need to run event stopPropagationmethod to prevent document click method , finally any click in the body of menus component gone to handle by you and any click event outside menus component resetToggle will run.

stopPropagation this prevent document click handler to run

  menuItemClickHandler(e , index ) {
   e.stopPropagation();
   // something magical