title: Angular 2 : how to open ngx-popover programmatically
body: <p>I am using <a href="https://github.com/pleerock/ngx-popover" rel="nofollow noreferrer">ngx-popover</a> I am trying to open it from another component by clicking button </p>
  
  <p>secondcomponent.html</p>
  
  <pre><code>&lt;button popover #ChatPopover=popover (click)="ClickElement()"&gt;
                              &lt;span class="glyphicon glyphicon-comment"&gt;&lt;/span&gt;
                          &lt;/button&gt;
  </code></pre>
  
  <p>secondcomponent.ts</p>
  
  <pre><code>ClickElement() {
  
     this.div = document.getElementById("ChatPopover")
     console.log(this.div);
  
  }
  </code></pre>
  
  <p>popoverelement.html</p>
  
  <pre><code>&lt;div class="chat" name="chatwindow"&gt;
              &lt;div [ng2-draggable]="true"&gt;
                  &lt;popover-content #ChatPopover
                                   placement="right"
                                   [animation]="true"
                                   [closeOnClickOutside]="true"&gt;
  
  
                      &lt;button type="button" class="close" aria-label="Close" (click)="ChatPopover.hide()"&gt;
                          &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;h5 style="color:#D25C50"&gt;Chat&lt;/h5&gt;
  
                  &lt;/popover-content&gt;
              &lt;/div&gt;
         &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>