appendToBody is not working templateRef

[manandkumaar]

Hi @thomasbottonari, Hi @RobertCMusk ,

Thanks for building this component.

Today i found a issue that appendToBody is not working with templateRef.
is there any way to fix this issue?.

Help is much appreciated.

<div class="placement-reflection center-content">
    <popover-content #cryRef>
        <h2>Loudly Crying Face</h2>
        A sad face with tears streaming down both cheeks. This face is distraught and inconsolable. Not to be confused
        with the <a href="https://emojipedia.org/face-with-tears-of-joy/" target="_blank">tears of joy emoji</a>.
    </popover-content>
    <img class="emoji" height="75" [popover]="cryRef" [appendToBody]="true" popoverPlacement="bottom" src="assets/cry.png">
</div>

My Understanding about the issue:-
Since it is a component instance and already compiled and added into component tree, removing and adding back on body is the issue. Please correct me if i am wrong.

If my understanding is correct, can this be done as [innerHTML] and ng-template instead of getting the component's instance as input?.

So that tooltip component's instance can be created as the same as it was done for string input.
Just a thought.

[thomasbottonari]

I was able to reproduce this and confirmed it is an issue. I haven't had time to look into a solution yet, but feel free to attempt a PR if possible. Thanks for reporting.

[pushpendersingh97]

When this issue can be fixed?

[vinod-amt]

whenever i put "[appendToBody]" value, the popover is going outside of the view.
is there a plan on solving this?

[ChandraDevani]

Hey,
Just to let you know, I have cloned this plugin and made some customizations to it specifically for the templateRef. It is working for me.

Here are the Changes
popover.directive.ts line 58
@Input('popover') public content: string | TemplateRef<unknown>;

popover.directive.ts line 218 added new code
this.popover = this.createComponent(this.popoverContentComponent); const popover = this.popover.instance as PopoverContentComponent; popover.popover = this; popover.popoverContent = this.content;

popover-content.component.ts line 44 added new Template Ref in .popover-body class
<ng-container *ngTemplateOutlet="popoverContent"></ng-container>

popover-content.component.ts line 55 added new @input
@Input() public popoverContent!: TemplateRef<unknown>;

Here is the Template Ref to popover