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

angular-confirmation-popover

October 13, 2017
An angular 4.0+ bootstrap confirmation popover

Demo

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

About

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

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  
    [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.

Usage without a module bundler

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

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

Note: Special thanks to Matt Lewis

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