Bind and Unbind event listener for elements in Angular

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