Angular 2 : how to open ngx-popover programmatically

Question

I am using ngx-popover I am trying to open it from another component by clicking button

secondcomponent.html

<button popover #ChatPopover=popover (click)="ClickElement()">
                            <span class="glyphicon glyphicon-comment"></span>
                        </button>

secondcomponent.ts

ClickElement() {

   this.div = document.getElementById("ChatPopover")
   console.log(this.div);

}

popoverelement.html

<div class="chat" name="chatwindow">
            <div [ng2-draggable]="true">
                <popover-content #ChatPopover
                                 placement="right"
                                 [animation]="true"
                                 [closeOnClickOutside]="true">


                    <button type="button" class="close" aria-label="Close" (click)="ChatPopover.hide()">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 style="color:#D25C50">Chat</h5>

                </popover-content>
            </div>
       </div>

Here secondcomponent is not a direct child component of popovercomponent. so I tried to implement through document getelementbyId, from this I'm getting popover reference but popover is not coming.

Answer 1

Hope it's not too late to this question.

1. Define your popover directive

<a [routerLink]="null" #popoverDirective="popover" [popover]="selectorPopover" popoverPlacement="top" container="body"></a>

2. Reference to your popover directive like this @ViewChild('popoverDirective') popoverDirective: PopoverDirective;

3. Then in your code show or hide popover this.popoverDirective.show(); this.popoverDirective.hide();