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

7.0.0 • Public • Published

Angular confirmation popover

Sponsorship CI codecov npm version Twitter Follow

Demo

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

Table of contents

About

A simple angular 15.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
  • Install pnpm: corepack enable
  • Install local dev dependencies: pnpm install while current directory is this repo

Development server

Run pnpm start to start a development server on port 8000 with auto reload + tests.

Testing

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

Release

pnpm release

License

MIT

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    Weekly Downloads

    4,028

    Version

    7.0.0

    License

    MIT

    Unpacked Size

    196 kB

    Total Files

    24

    Last publish

    Collaborators

    • mattlewis92