angular2-bootstrap-confirm

Angular2 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 angular2-bootstrap-confirm

Then use it in your app on a component:

import {Component} from '@angular/core';
import {ConfirmOptions, Position} from 'angular2-bootstrap-confirm';
import {Positioning} from 'angular2-bootstrap-confirm/position/position';
// Or if you're already using the @ng-bootstrap/ng-bootstrap module
// import {Positioning} from '@ng-bootstrap/ng-bootstrap/util/positioning';
// or if you're using the ng2-bootstrap module
// import {PositionService as Positioning} 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,
     // this is required so you can use the bundled position service rather than rely on the `@ng-bootstrap/ng-bootstrap` module
    {provide: Position, useClass: Positioning}
  ],
  template: `
    <button
      class="btn btn-default"
      mwlConfirm
      [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;
}

// now use within your apps module
import {NgModule} from '@angular/core';
import {ConfirmModule} from 'angular2-bootstrap-confirm';

@NgModule({
  declarations: [MyComponent],
  imports: [ConfirmModule],
  bootstrap: [MyComponent]
})
class MyModule {}

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.Positioning
    // confirm options, directive and position token available as ng2BootstrapConfirm.ConfirmOptions, ng2BootstrapConfirm.Confirm, ng2BootstrapConfirm.Position
</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 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

• Bump the version in package.json (once the module hits 1.0 this will become automatic)

npm run release

License

MIT

Changelog

0.10.0 (2016-08-12)

Features

• upgrade to angular RC5 (040010d)

BREAKING CHANGES

• A peer dependency of angular RC5 is now required.

The ConfirmPopover component and Confirm directive are now no longer exported. Instead you must use the new ConfirmModule module in your apps module like so:

import {NgModule} from '@angular/core';
import {ConfirmModule} from 'angular2-bootstrap-confirm';

@NgModule({
  declarations: [MyComponent],
  imports: [ConfirmModule],
  bootstrap: [MyComponent]
})
class MyModule {}

<a name="0.9.1"></a>