ng-bootstrap: ERROR TypeError: Cannot read property 'isEventFrom'

@pkozlowski-opensource thanks for the clarification, in our case ngbDropdownToggle was available only after ngbDropdown was created, wrong code snippet bellow

      <div ngbDropdown>
        <button ngbDropdownToggle *ngIf="showButton()">Btn</button>
        <ul ngbDropdownMenu>
          <li *ngFor="let item of items">
            <button (click)="actionOnItem(item)">{{item.name}}</button>
          </li>
        </ul>
      </div>

I’ve determined the error appears when applying an *ngIf to the “ngbDropdownToggle” element

@vlafargue we need a minimal reproduce scenario in a plunker / stackblitz. Please provide one or it is not actionable and will be closed. You can start by modifying this stackblitz: https://stackblitz.com/edit/angular-tqqjmj?file=app/dropdown-basic.html

Please note that you must use one of the NgbDropdownToggle or NgbDropdownAnchor directives inside ngbDropdown so we know where to position a dropdown menu window: https://ng-bootstrap.github.io/#/components/dropdown/api.

Ok I figured it out after some debugging. All ngbDropdowns need to have an Anchor or Toggle. Otherwise it will affect even correctly implemented ngbDropdowns.:

See example on stackblitz: https://stackblitz.com/edit/angular-tqqjmj-n2f55n

@andrewlistopadov downgrading version without understanding the root cause is not the approach you can recommend long-term as you would be stuck in a particular version of the library.

If you want to help and believe that you are facing the same issue, please provide a minimal reproduce scenario as indicated in the issue template and my previous comment.

I have the same. In version 1.0.0 it was

NgbDropdown.prototype._isEventFromToggle = function ($event) { return this._toggle ? this._toggle.isEventFrom($event) : false; };

but in 1.1.2 it’s become

NgbDropdown.prototype._isEventFromToggle = function($event) { return this._anchor.isEventFrom($event); } That can be a cause of problem. Downgrading to 1.0.0 helps me.

I ran into the same issue today

https://stackblitz.com/edit/angular-tqqjmj-flhcmt?file=app%2Fdropdown-basic.html

https://angular-tqqjmj-flhcmt.stackblitz.io/

For me, the ngbDropdownToggle directive was missing on the button.

Ok, after looking the code, if think the change to make are:

From this code:

NgbDropdown.prototype._isEventFromToggle = function ($event) {
 return this._anchor.isEventFrom($event); };

To this code:

  NgbDropdown.prototype._isEventFromToggle = function ($event) {
    return this._anchor ? this._anchor.isEventFrom($event) : false;

But I’m not sure!