mat-dialog-prompt v0.0.2

mat-dialog-prompt

Because I'm tired of copying this stuff between projects. https://www.npmjs.com/package/mat-dialog-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 Material Dialog in place of window.confirm or window.alert.

Getting Started

This is an extension for Angular Material, so that's a required dependency.

1. Install via npm or yarn

npm i -S mat-dialog-prompt
//------------- OR --------------
yarn add mat-dialog-prompt

2. Import MatDialogPromptModule in your application

import { MatButtonModule, MatDialogModule } from '@angular/material';
import { MatDialogPromptModule } from 'mat-dialog-prompt';
@NgModule({
  ...
  imports: [... MatButtonModule, MatDialogModule, MatDialogPromptModule],
  ...
})
export class AppModule { }

Usage

Inject MatDialogPromptService and use.

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

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

For customization, use prompt():

const input: MatDialogPromptInput = {
  title: 'Confirm...',
  content: '<strong>HTML works</strong> in the prompt',
  cancel: false, // false disables (hides) the action
  // no: false, // excluding an action enables with defaults
  yes: { text: 'OK', color: 'accent' } // customize the action button text and color
};
// Customize the MatDialog instance (optional)...
const config: MatDialogConfig = {};
// Prompt the user...
this.matDialogPromptService.prompt(input, options).subscribe(result => {
  if (result === MatDialogPromptResult.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/mat-dialog-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.