https://mattlewis92.github.io/angular-confirmation-popover/
A simple angular 4.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.
Pull requests are welcome.
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
[title]="title"
[message]="message"
placement="left"
(confirm)="confirmClicked = true"
(cancel)="cancelClicked = true">
Click me!
</button>
`
})
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.
<script src="node_modules/angular-confirmation-popover/dist/umd/angular-confirmation-popover.js"></script>
<script>
// everything is available under the angularConfirmationPopover namespace
</script>
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: 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