Angular confirmation popover

Demo

https://mattlewis92.github.io/angular-confirmation-popover/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

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

AngularJS 1.x version

Installation

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
@NgModule({
  declarations: [MyComponent],
  imports: [
    ConfirmationPopoverModule.forRoot({
      confirmButtonType: 'danger' // set defaults here
    })
  ],
  bootstrap: [MyComponent]
})
class MyModule {}

// now use it within your component
@Component({
  selector: 'my-component',
  template: `
    <button
      class="btn btn-default"
      mwlConfirmationPopover
      [popoverTitle]="popoverTitle"
      [popoverMessage]="popoverMessage"
      placement="left"
      (confirm)="confirmClicked = true"
      (cancel)="cancelClicked = true">
      Click me!
    </button>
  `
})
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 = () => {};

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-confirmation-popover/docs/

The main mwlConfirmationPopover directive options can be viewed here.

Development

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.

Testing

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

Release

npm run release

License

MIT