Neutral Point Measurement

    angular-confirmation-popover
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.0 • Public • Published

    Angular confirmation popover

    Sponsorship Build Status codecov npm version Twitter Follow

    Demo

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

    Table of contents

    About

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

    AngularJS 1.x version

    Installation

    1. Install through npm:
    npm install angular-confirmation-popover
    
    1. Install bootstrap (both v3 and v4 are supported). If not using bootstrap you could implement the popover styles yourself.

    2. Add the NgModule:

    import { NgModule, Component } from '@angular/core';
    import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
     
    @NgModule({
      declarations: [MyComponent],
      imports: [
        ConfirmationPopoverModule.forRoot({
          confirmButtonType: 'danger', // set defaults here
        }),
      ],
      bootstrap: [MyComponent],
    })
    class MyModule {}
    1. Now use it within your component
    @Component({
      selector: 'my-component',
      template: `
        <button
          class="btn btn-outline-secondary"
          mwlConfirmationPopover
          [popoverTitle]="popoverTitle"
          [popoverMessage]="popoverMessage"
          placement="left"
          (confirm)="confirmClicked = true"
          (cancel)="cancelClicked = true"
        >
          Click me!
        </button>
      `,
    })
    class MyComponent {
      popoverTitle = 'Popover title';
      popoverMessage = 'Popover description';
      confirmClicked = false;
      cancelClicked = false;
    }

    You may also find it useful to view the demo source.

    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

    Install

    npm i angular-confirmation-popover

    DownloadsWeekly Downloads

    3,597

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    255 kB

    Total Files

    27

    Last publish

    Collaborators

    • mattlewis92