Angular ngx-smart-popover open on condition

Question

Currently I have the smart popover setup like this with an additional button and shown on click. This is put in it's own component like this:

<popover-content #myPopover id="myPopover"  
   placement="bottom" [animation]="true" [closeOnClickOutside]="false" >
// Some content here
</popover-content>
<input type='button' #selectMyPopover [popover]="myPopover" class='btn'
  popoverPlacement="bottom" [popoverOnHover]="false" 
 [popoverCloseOnMouseOutside]="false" [value]='myButton'>

And then when I want to use it I include it with the component tag like this:

<app-my-popover></app-my-popover>

It's great but all examples I've found requires the usage of that additional button like this:

<input type='button'[popover]="myPopover"...

I am trying to show the popover based on condition instead of having to click on that button. For example:

myMethod()
{
    if(true)
    {
        this.myPopover.open();
    }
}

is it possible to open in from the typescript in a similar way on your own instead of using the button?

Answer 1

You'll need to get a reference to the popover component in your typescript using ViewChild as following:

@ViewChild('myPopover') myPopover : PopoverContentComponent;

then you can access this reference where you want:

this.myPopover.show();

Answer 2

if you take a look at their source here there is show and hide method. Then you need to get reference to that object in your ts file by using @ViewChild as below

@ViewChild('myPopover') myPopover : PopoverContentComponent;

later you can do

this.myPopover.show();