angular bootstrap - Popover with HTML content

app.component.html

<h4 style="padding-top:25px; padding-bottom:50px;">
  Angular Bootstrap - Popover with HTML content
</h4>

<ng-template #popTitle>Popover HTML <b>Title</b></ng-template>
<ng-template #popContent>
  Lorem <span style="color:red;">
  dolor sit amet,</span>
  consectetur elit.
  Vivamus <b>eget sodales justo</b>.
  Donec eu <i>condimentum nibh, eu congue mi</i>.
  Phasellus <u>ipsum sit amet faucibus</u> placerat.
</ng-template>

<button 
  #pop="ngbPopover"
  placement="end-top"
  [ngbPopover]="popContent" 
  [popoverTitle]="popTitle">
    Open Popover
</button>

More Angular tutorials

• 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 delay Popover open close
• angular bootstrap - Popover manual triggers
• angular bootstrap - Popover custom CSS class
• angular bootstrap - Popover shown & hidden event
• angular bootstrap - Timepicker with meridian
• angular bootstrap - Timepicker without spinner
• angular bootstrap - Timepicker custom steps