I have been trying to close a drop-down on-click outside of the invoking button(ie. window). Using javascript it was easy as i could simply

  // Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.bulk-dropbtn')) {

  var dropdowns = document.getElementsByClassName("bulk-dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
 }
}

But I guess typescript doesn't support this, as I am getting an error on window.onclick [ts] ';' expected.

Is there any other method I can perform an onClick detection on typescript without promising on performance

I have been trying to close a drop-down on-click outside of the invoking button(ie. window). Using javascript it was easy as i could simply

  // Close the dropdown menu if the user clicks outside of it
window.onclick = function (event) {
if (!event.target.matches('.bulk-dropbtn')) {

  var dropdowns = document.getElementsByClassName("bulk-dropdown-content");
  var i;
  for (i = 0; i < dropdowns.length; i++) {
    var openDropdown = dropdowns[i];
    if (openDropdown.classList.contains('show')) {
      openDropdown.classList.remove('show');
    }
  }
 }
}

But I guess typescript doesn't support this, as I am getting an error on window.onclick [ts] ';' expected.

Is there any other method I can perform an onClick detection on typescript without promising on performance

• javascript
• angular

Share Improve this question Follow asked Oct 23, 2017 at 6:17 Ronit OommenRonit Oommen 3,16044 gold badges1919 silver badges2525 bronze badges 3

• add the plete error message – Sagar V Commented Oct 23, 2017 at 6:18
• I just receive an error at the dot operator of window.onclick or document.onclick [ts] ';' expected. (property) EnquiryManageComponent.window: any – Ronit Oommen Commented Oct 23, 2017 at 6:21
• better give (click)="callback()" in body – Sagar V Commented Oct 23, 2017 at 6:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You can use something like this within your ponent:

  @HostListener('document:click', ['$event'])
  onDocumentClick(event: MouseEvent) {
    const dropDownParent = checkIfYourTargetIsWithinSomeParentFunction(event.target, 'toolbar');
    if (!dropDownParent && this.dropdownElementRef) {
      //if its not within given parent > hide it this way or set boolean
      //variable that's bound to elements visibility property in template
      this.dropdownElementRef.style.display = 'none';
    }
  }

Try this:

@HostListener('document:click', ['$event'])
onDocumentClick(event: MouseEvent) {
    if (!(event.target == document.getElementById("THE ID OF YOUR BUTTON"))) {
      var dropdowns = document.getElementsByClassName("dropdown-content");
      var i;
      for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if (openDropdown.classList.contains('show')) {
          openDropdown.classList.remove('show');
        }
      }
    }
  }