node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Angular confirmation popover

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license


Table of contents


A simple angular 5.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.

AngularJS 1.x version


Install through npm:

npm install --save angular-confirmation-popover

Then use it in your app on a component:

 // include bootstrap - both v3 and v4 are supported
 // if not using bootstrap you could implement the popover styles yourself
import 'bootstrap/dist/css/bootstrap.css';
import { NgModule, Component } from '@angular/core';
import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
// first add it to your apps module
  declarations: [MyComponent],
  imports: [
      confirmButtonType: 'danger' // set defaults here
  bootstrap: [MyComponent]
class MyModule {}
// now use it within your component
  selector: 'my-component',
  template: `
      class="btn btn-default"
      (confirm)="confirmClicked = true"
      (cancel)="cancelClicked = true">
      Click me!
class MyComponent {
  public popoverTitle: string = 'Popover title';
  public popoverMessage: string = 'Popover description';
  public confirmClicked: boolean = false;
  public cancelClicked: boolean = false;

You may also find it useful to view the demo source.

Usage with universal

You will need to add this line in your server bootstrap code to get this module to work with universal:

(global as any).HTMLElement = () => {};


All documentation is auto-generated from the source via compodoc and can be viewed here:

The main mwlConfirmationPopover directive options can be viewed here.


Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.


Run npm test to run tests once or npm run test:watch to continually run tests.


npm run release