Need exportAs in NgxPopperjsDirective to export directive so that it can be used like template reference in template.

[pavandixit93]

This was already provided in Mr Frankel's ngx-popper repo.
Reference: https://github.com/MrFrankel/ngx-popper/blob/master/src/popper-directive.ts#L17-L19
How it helps/ Where is usage:

<div 
    #popperRef="popper"
    popper="As text"
    [popperTrigger]="'hover'"
    [popperPlacement]="'bottom'"
    [customDir]="popperRef">
    <p class="bold">Pop</p>
</div>

Here i am getting the directive reference using #popperRef="popper" and passing same to the my customDir, which has custom functionality around popper.
Can we add same in NgxPopperjsDirective? That would be really helpful. I know the other workaround but if we use exportAs it will keep code simple and will reduce the lines of code needed for workaround.

[tonysamperi]

Hello @pavandixit93
yes I guess I can throw in the exportAs in the next release...
Altough I don't really see the upside. What "other workaround" are you talking about?

[pavandixit93]

Hi @tonysamperi Thanks for the update, The change is simple and i hope that will come soon.
Other workaround cab be by using ViewChild as shown below, but doing this increases the lines of code.

custom-popper.component.ts:

@ViewChild('popperRef', {read: NgxPopperjsDirective}) popperRef: NgxPopperjsDirective

custom-popper.component.html:

<div 
    #popperRef
    popper="As text"
    [popperTrigger]="'hover'"
    [popperPlacement]="'bottom'"
    [customDir]="popperRef">
    <p class="bold">Pop</p>
</div>

[tonysamperi]

I'll give you a hint, there's a much much simpler solution without using ViewChild 😉
Anyway I'm dealing with a few things at this time, but I'll try to release an update in about 1 month...

Bye!

[tonysamperi]

Actually let's keep this open to track the resolution.