constructor(private elementRef: ElementRef) { } openNav() { this.sideNavWidth = '275px'; this.bindBodyClick(); } bindBodyClick() { setTimeout(() => { this.handleBodyClickListener = this.handleBodyClick.bind(this); this.elementRef.nativeElement.querySelector('.appMain') .addEventListener('click', this.handleBodyClickListener, false); this.elementRef.nativeElement.querySelector('.appNavbar') .addEventListener('click', this.handleBodyClickListener, false); }, 300); } unbindBodyClick() { this.elementRef.nativeElement.querySelector('.appMain') .removeEventListener('click', this.handleBodyClickListener, false); this.elementRef.nativeElement.querySelector('.appNavbar') .removeEventListener('click', this.handleBodyClickListener, false); } closeNav() { this.sideNavWidth = '0px'; this.unbindBodyClick(); } handleBodyClick(event) { this.closeNav(); }
References
https://stackoverflow.com/questions/41609937/how-to-bind-event-listener-for-rendered-elements-in-angular-2
https://stackoverflow.com/questions/11565471/removing-event-listener-which-was-added-with-bind