angular2-bootstrap-confirm

Angular bootstrap confirm

Demo

https://mattlewis92.github.io/angular2-bootstrap-confirm/

Table of contents

• About
• Installation
• Documentation
• Development
• License

About

A simple angular2 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/core@2.0.0-rc.1 angular2-bootstrap-confirm

Then use it in your app on a component:

import {Component, provide} from '@angular/core';
import {Confirm, ConfirmOptions, Position} from 'angular2-bootstrap-confirm';
import {PositionService} from 'angular2-bootstrap-confirm/position/position';
// Or if you're already using the ng2-bootstrap module
// import {PositionService} from 'ng2-bootstrap/components/position';

@Component({
  selector: 'my-component',
  providers: [ // you can pass both of these when bootstrapping the app to configure globally throughout your app
    ConfirmOptions,
    provide(Position, { // this is required so you can use the bundled position service rather than rely on the `ng2-bootstrap` module
      useClass: PositionService
    })
  ],
  directives: [
    Confirm
  ],
  template: `
    <button
      class="btn btn-default"
      mwl-confirm
      [title]="title"
      [message]="message"
      placement="left"
      (confirm)="confirmClicked = true"
      (cancel)="cancelClicked = true"
      [(isOpen)]="isOpen">
      Click me!
    </button>
  `
})
class MyComponent {
  public title: string = 'Popover title';
  public message: string = 'Popover description';
  public confirmClicked: boolean = false;
  public cancelClicked: boolean = false;
  public isOpen: boolean = false;
}

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

Usage without a module bundler

<script src="node_modules/angular2-bootstrap-confirm/position/position.js"></script>
<script src="node_modules/angular2-bootstrap-confirm/angular2-bootstrap-confirm.js"></script>
<script>
    // position service available as ng2BootstrapPosition.PositionService
    // confirm options, directive and position token available as ng2BootstrapConfirm.ConfirmOptions, ng2BootstrapConfirm.Confirm, ng2BootstrapConfirm.Position
</script>

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here: https://mattlewis92.github.io/angular2-bootstrap-confirm/docs/

The main confirm 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

Changelog

0.4.0 (2016-05-10)

Features

ConfirmOptions: allow confirm options to be instantiated by angulars DI

BREAKING CHANGES

• the constructor of ConfirmOptions now no longer takes an object of values.

This allows you to just pass ConfirmOptions directly to the providers of your app or component and angular will instantiate it for you. e.g.

providers: [ConfirmOptions], // previously angular would throw and you'd have to instantiate it yourself with useFactory

To migrate:

Before:

const options = new ConfirmOptions({
  focusButton: 'confirm'
});

After:

const options = new ConfirmOptions();
Object.assign(options, {
  focusButton: 'confirm'
});

<a name="0.3.3"></a>