https://mattlewis92.github.io/angular-confirmation-popover/
A simple angular 5.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.
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.
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.
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm installwhile current directory is this repo
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 releaseMIT