ngx-smart-popover show and hide doesn't work with PopoverDirective.

[tonmoymistry12]

Tried to call those methods, but its not working. Tried the solution which was mentioned earlier but its failing.

[needmoreminerals]

Don't call show() and hide() methods of the popover content itself.
Call those methods of the popover directive instead:

In HTML:
<div [popover]="myPopover" #cdire=popover [popoverOnHover]="false" [popoverCloseOnMouseOutside]="false">
(I didn't include popover content here as it's trivial)

In TS:
import { PopoverDirective } from "ngx-smart-popover"
...
@ViewChild('cdire') popoverDirective: PopoverDirective;
...
And call show like this:
this.popoverDirective.show()

The reason for that is that when you are calling show() on the popover itself the 1st time it doesn't know its directive. The directive is the element that establishes the connections between these two first time.

[avelinocneto]

@needmoreminerals can you provide the same example with two or more popovers on the same component?
I'm trying to call two popovers using @ViewChild but when I run the command this.popover.show() always trigger the first one.

[avelinocneto]

@needmoreminerals I've already have two directives it's now working. But I'm using (focus)="this.popover.show()" to display the popover when I click in the input. So it's just works when I put the mouse over the popover icon for the first time. Can you help me?

[ClemannD]

To get access to multiple popover view children, you can give ids to each element you have attached the popover directive to.

I was able to trigger each popover individually with the following code

@Component({
    selector: 'app-root',
    template: `
        <popover-content #sweatRef>
            <h2>Grinning Face With Sweat</h2> 
        </popover-content>
        <img #test1=popover class="emoji" height="75" [popover]="sweatRef" [popoverOnHover]="false" src="assets/sweatRef.png">

        <popover-content #tongueRef>
            <h2>Winking Face With Tongue</h2>
            A face showing a stuck-out tongue, winking at the same time. Used in an attempt to be wacky, zany, or otherwise
            joking.
        </popover-content>
        <img #test2=popover class="emoji" height="75" [popover]="tongueRef" [popoverOnHover]="false" src="assets/tongue.png">

        <button (click)="popover1.show()">Test1</button>
        <button (click)="popover2.show()">Test2</button>
    `
})
export class AppComponent {
    @ViewChild('test1') public popover1: PopoverDirective;
    @ViewChild('test2') public popover2: PopoverDirective;
}

If this is not working for you @avelinocneto please provide examples from your code so we can better help debug.

[avelinocneto]

I will test it and contact you again! Thanks