angular bootstrap - Open close Popover on button click

app.component.html

<h4 style="padding-top:25px; padding-bottom:50px;">
  Angular Bootstrap - Open close Popover on Button click
</h4>

<button 
  #pop="ngbPopover"
  placement="end-top"
  triggers="manual"
  [autoClose]="false"
  (click)="pop.open()"
  ngbPopover="Lorem ipsum dolor sit amet,
    consectetur adipiscing elit.
    Vivamus eget sodales justo.
    Donec eu condimentum nibh, eu congue mi.
    Phasellus malesuada ipsum sit amet faucibus placerat." 
  popoverTitle="Popover Manual Triggers">
  Open Popover
</button>
<br/><br/>

<button (click)="pop.close()">
  Close Popover
</button>

More Angular tutorials

• angular - How to use ternary operator
• angular - How to generate random number
• angular - How to toggle element visibility
• angular bootstrap - How to show an alert
• angular bootstrap - How to use Collapse
• angular bootstrap - How to use Rating
• angular bootstrap - How to use Progressbar
• angular bootstrap - Show text inside Progressbar
• angular bootstrap - Show custom label in Progressbar
• angular bootstrap - How to change Progressbar height
• angular bootstrap - How to use Popover
• angular bootstrap - Open Popover on mouse hover
• angular bootstrap - Datepicker navigate to current month
• angular bootstrap - Datepicker navigate to specific year month
• angular bootstrap - Datepicker navigate select specific date