ngb-modal-prompt v0.0.1

ngb-modal-prompt

Because I'm tired of copying this stuff between projects. https://www.npmjs.com/package/ngb-modal-prompt

About

Nobody likes window.confirm or window.alert. Use this module instead. It provides a service that can be injected for displaying a configurable Bootstrap Modal in place of window.confirm or window.alert.

Getting Started

This is an extension for ng-bootstrap, so that's a required dependency.

1. Install via npm or yarn

npm i -S ngb-modal-prompt
//------------- OR --------------
yarn add ngb-modal-prompt

2. Import NgbModalPromptModule in your application

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgbModalPromptModule } from 'ngb-modal-prompt';
@NgModule({
  ...
  imports: [NgbModule, NgbModalPromptModule],
  ...
})
export class AppModule { }

Usage

Inject NgbModalPromptService and use.

// Confirm yes or no:
this.ngbModalPromptService.confirm('Did this modal work?', 'Optional Title').subscribe(result => {
  if (result === NgbModalPromptResult.yes) {
    // Do something
  }
});

// Simple alert (no dismiss unless OK clicked):
this.ngbModalPromptService.alert('This modal works.', 'Optional Title').subscribe(result => {
  // Do something
});

For customization, use prompt():

const input: NgbModalPromptInput = {
  title: 'Confirm...',
  content: '<strong>HTML works</strong> in the prompt',
  cancel: false, // false hides the action
  no: true, // true (or excluding) uses default
  yes: { text: 'Custom text', btnClass: ['btn-success'] } // customize the action button text and CSS classes
};
// Customize the NgbModal instance (optional)...
const options: NgbModalOptions = {};
// Prompt the user...
this.ngbModalPromptService.prompt(input, options).subscribe(result => {
  if (result === NgbModalPromptResult.yes) {
    // Do something
  }
});

Local Development

If you wish to contribute to this repository, below are the steps for local development.

1. Clone the repository git clone https://github.com/cf91/ngb-modal-prompt.git
2. Run npm install to install the dependencies
3. Run npm build to build both the library and demo app and create a link
4. Run npm start to build and watch the demo app (opens the app at http://localhost:4200/ automatically)
5. Run npm watch:lib to build and watch the library

Build

Run npm run build to build the library and demo app together. The build artifacts will be stored in the dist/ directory.

This step is used by CircleCI to build both library and demo app. After a succesful build, a new semantic version of library is published to npm.

Tests

Run npm run test:lib or npm run test:app to execute the unit tests via Karma.