search

lsqlabs / ngx-smart-popover

45 stars 27 forks source link

appendToBody is not working templateRef #46

Open manandkumaar opened 4 years ago

manandkumaar commented 4 years ago

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 commented 4 years ago

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 commented 2 years ago

When this issue can be fixed?

vinod-amt commented 1 year ago

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

ChandraDevani commented 4 months ago

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
image