Ngx-bootstrap: Disable dropdown button when there are no options available

Question

How do we disable the dropdown when there are no child options available? I have some code similar to the one below:

Component.html

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-default dropdown-toggle" [disabled]="!isOptionsVisible()">
    Request Actions <span class="caret"></span>
  </button>
  <ul id="dropdown-actions" *dropdownMenu class="dropdown-menu" #optionsList>
    <li *ngIf="condition1">
      <a class="dropdown-item">Option1</a>
    </li>
    <li *ngIf="condition2">
      <a class="dropdown-item">Option2</a>
    </li>
  </ul>
</div>

Component.ts

@ViewChild('optionsList') optionsList;

isOptionsVisible() {
  let visible = true;
  if (this.optionsList) {
    visible = this.optionsList.nativeElement.querySelectorAll('li').length > 0;
  }
  return visible;
}

The above code used to work while the template was written in bootstrap 3, but after we migrated the code to ngx-bootstrap, I found that the <li> elements do not exist until the button is clicked. This is causing the condition if (this.optionsList) to fail always.