How To Use ng-Bootstrap Popover In Angular

Introduction:

We will learn how to install NgBootstrap in an Angular application and develop Popover UI Component using examples in this tutorial.

A popover is a small overlay that is used to show information in a floating container. Popovers function similarly to tooltips but can have intricate HTML template structures. These can be controlled to be triggered by click, hover, mouseover,  etc events.

To use ng-Popover bootstrap’s UI component in our project, let’s first create a new Angular project and then install it.

Step 1: Create a new Project

First create new angular project by using following command in terminal.

     ng new popover-demo

Step 2: 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

Only UI components are included with ng-bootstrap, thus to style these components, we must include a CSS styling file in the index.html file at the root of the Angular project.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

Step 3 : Update App Module

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';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Adding bootstrap Popover

We may apply ng-template tags to particular content to alter HTML content in popovers, as demonstrated below:

<ng-template #popContent>Hello</ng-template>
<ng-template #popTitle>Title</ng-template>

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

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

Run the project using pm start command.

Now, let’s discuss about some configuration properties of popover.

ngbPopover:

This is a necessary directive property that accepts a string or the variable templateRef to display content.

popoverTitle:

The title of the popover can take string or templateRef.

triggers:

Events to show Popovers can be changed from default click to mouseover.

popoverClass:

A custom class can be added using this property to a popover container.

container:

Although we may provide any other selector to append, by default popovers items are attached to the body.

Output:

Conclusion:

We have discussed about how to install the ng-bootstrap package and use its Popover UI component to use Bootstrap popovers in an Angular project.