popperTarget issue when used with element hidden by *ngIf (in Angular 8)

[dharmeshds]

Getting the error "Cannot set property 'referenceObject' of null" when loading the component because the element attached to popperTarget is conditionally hidden with *ngIf. Would anyone suggest an alternative or a fix please?

[ghost]

I use the css property visibility to hide/show the element attached to the popper.

[tonysamperi]

@dharmeshds could you create a Blitz?
I just released my [email protected] which now uses Popper 2 and Angular 8...maybe I could handle this!

[ghost]

HI, for the old version of the library you can wrap both the element attached to popperTarget and popper itself in the *ngIf.

it will be something like this:

<div *ngIf="condition" >
<div [popper]="myRefPopper" popperAppendTo="body"
               [popperTrigger]="'click'" [popperPlacement]="'bottom'">

</div>
<popper-content #myRefPopper>
<!-- here the content -->
</popper-content>
</div>

It works without error.

[tonysamperi]

I handled this scenario and now you can have an undefined ref, but of course it will show an empty popper...
So it's always better to hide everything.

Will release this in v 8.0.4...