Showing posts with label angular-confirmation-popover. Show all posts
Showing posts with label angular-confirmation-popover. Show all posts


October 13, 2017
An angular 4.0+ bootstrap confirmation popover



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

Pull requests are welcome.

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 title: string = 'Popover title';  
  public message: string = 'Popover description';  
  public confirmClicked: boolean = false;  
  public cancelClicked: boolean = false;  
You may also find it useful to view the demo source.

Usage without a module bundler

 <script src="node_modules/angular-confirmation-popover/dist/umd/angular-confirmation-popover.js"></script>  
   // everything is available under the angularConfirmationPopover namespace  

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  



Note: Special thanks to Matt Lewis

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.