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

In this Angular 9/8 tutorial, we’ll learn how to install NgBootstrap in Angular application and implement Popover UI Component by examples.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

What are Bootstrap Popovers?

A popover is a small overlay that 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. Popovers act like a tooltip but can have complex template HTML structures. These can be controlled to be triggered by click, hover, mouseover, etc events.


What is ng-bootstrap?

A bootstrap framework is known for its wide variety of UI components that are readily available to create a responsive and multi-platform supportive application. The ng-bootstrap package is exclusively created to convert the jQuery based Bootstrap UI components for the Angular framework. The ng-bootstrap package provides almost all Bootstrap components that can be easily used in an Angular project


Let,s create a new Angular project, then install the ng-bootstrap package to implement its Popover UI component in our project.

Create an Angular Project

For demonstration from scratch, here we will create a new Angular project.

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

$ ng new ng-bootstrap-popover-demo

Install ng-bootstrap

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

$ npm install --save @ng-bootstrap/ng-bootstrap

The 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

  <link rel="stylesheet" href="" >


Update App Module

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

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

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:

<button type="button" class="btn btn-outline-secondary mr-2" ngbPopover="Popover content" popoverTitle="Simple Popover"> Show Popover </button>

HTML in Popovers

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

<ng-template #popContent>Hello, <b>Popover</b>! content</ng-template>
<ng-template #popTitle>Title with Fancy <b> bold</b>, <i>italics</i> and <u>underlined</u> text</ng-template>

<button type="button" class="btn btn-outline-secondary" [ngbPopover]="popContent" [popoverTitle]="popTitle">
  Popover with HTML!

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

Configuration Properties of Popovers

Following are the configuration properties provided by ng-bootstrap Popovers:

  • 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: A 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.

import {Component} from '@angular/core';
import {NgbPopoverConfig} from '@ng-bootstrap/ng-bootstrap';

  selector: 'ngbd-popover-config',
  templateUrl: './popover-config.html',
  providers: [NgbPopoverConfig] // add NgbPopoverConfig to the component providers
export class NgbdPopoverConfig {
  constructor(config: NgbPopoverConfig) {
    // customize default values of popovers used by this component tree
    config.placement = 'right';
    config.triggers = 'hover';



We have discussed how to use Bootstrap popovers in an Angular project by installing the ng-bootstrap package and use its Popover UI component. The Popover component can be customized by using its various properties.


Notify of
Inline Feedbacks
View all comments

Can someone please tell me how can I increase popover model width


Works like a charm! Thanks a lot!


Thanks, it helped me lot