Search code examples
angularng2-bootstrap

ng2-bootstrap Open Popover from component?


I'm looking at the bs-popover from the ng2-bootstrap library here: http://valor-software.com/ngx-bootstrap/#/popover. But I don't see any example of how to open/close the popover from the component code. Has anyone done this? Here is my current view template:

<template #tipTemplate>
    <div class="row pop-container" style="position: relative; overflow: hidden;">
        <div class="row">
            <div class="col-sm-12">
                <button (click)="pop.hide()" class="btn btn-sm btn-danger pull-right">
                    <span class="glyphicon glyphicon-remove-circle"></span>&nbsp;Close
                </button>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <line-chart></line-chart>
                </div>
            </div>
        </div>
    </div>
</template>

<div class="row">
    <div class="col-sm-1 col-sm-offset-1">
        <button type="button" class="btn btn-xs btn-primary" (click)="pop.show()" container="body">
            <i class="fa fa-line-chart" aria-hidden="true"></i>
        </button>
    </div>
    <div class="col-sm-10">
        <span [popover]="tipTemplate"
              #pop="bs-popover"
              popoverTitle="Labs"
              placement="bottom"
              triggers=""
              class="lab-title">
            Troponin
        </span>
    </div>
</div>

And it's working fine, however instead of my button's click event directly opening the popover i'd like to invoke a function in my component which then does a few things and one of them is open the popover. Is this possible with this library?


Solution

  • You need to add this inside your component.ts

    import { Component, OnInit, ViewChild } from '@angular/core';
    

    inside the component,

    @ViewChild('childModal') public childModal: ModalDirective;
    

    and then, whenever you want to open the modal

     this.childModal.show();