Angular 8 + ng-bootstrap 4 | Popover Tutorial by Example

In this tutorial, we will learn how to install NgBootstrap in Angular application and implement Popover UI Component by examples.

What are Bootstrap Popovers?

A popover is a small overlay which is used to show information in a floating container. It is shown at a specified position by user actions like Click or Hover beside an element.

Create an Angular Project

For demonstration from scratch, here we will create a new Angular project in latest version 8.3.0.

Run following ng command in terminal to create a new project:

Install Bootstrap

After creating the project, we will install ng-bootstrap in the project by running the following npm command:

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root


Import NgbModule ( Bootstrap module ) & FormsModule ( for Angular as we will use [(ngModel)] ) in the app.module.ts file

Adding Bootstrap Popover

Check the following ways using which we can implement NgBootstrap Popovers in Angular app:

Basic Popovers

These are the basic and simplest Popover implementation method, where you just need to add placement, ngbPopover, and popoverTitle properties:

HTML in Popovers

To customized content with HTML in popovers, we can use ng-template tags to specific content as shown below:

Here we provided Template Reference variables #popContent and #popTitle template elements then provided them to [ngbPopover] and [popoverTitle] properties of the button.

Configuration Properties

ng-bootstrap Popovers provides the following configuration properties:

ngbPopover: This is required directive property which takes a string or templateRef variable to show content.

placement: Position of popover container respective of the parent element can be changed with values : "top", "top-left", "top-right", "bottom", "bottom-left", "bottom-right", "left", "left-top", "left-bottom", "right", "right-top", "right-bottom"

popoverClass: Custom class can be added using this property to a popover container.

container: Default popovers elements are appended to the body, but we can specify any other selector to append.

popoverTitle: The title of the popover, can take string or templateRef.

triggers: Events to show Popovers can be changed from default click to mouseover. example triggers="mouseenter:mouseleave"

disablePopover: Default is false, if set to true, popover won’t be displayed.

closeDelay: The closing delay in ms.

autoClose: Indicates whether the popover should be closed on Escape key and inside/outside clicks:

true – closes on both outside and inside clicks as well as Escape presses
false – disables the autoClose feature (NB: triggers still apply)
"inside" – closes on inside clicks as well as Escape presses
"outside" – closes on outside clicks (sometimes also achievable through triggers) as well as Escape presses

Global Configurations

Instead of adding HTML properties to each tooltip, we can add a global option configuration object in the component class.

Import NgbPopoverConfig then add in providers array under component’s meta information. Also, add in the class constructor.



Leave a Reply

Notify of