@jaspero/ng-confirmations NPM

NG Confirmations

An easy to use alert library for Angular.

A demo can be found here

Installation

To install this library, run:

$ npm install --save @jaspero/ng-confirmations

Setup

Import JasperoConfirmationsModule in your @NgModule:

@NgModule({
    imports: [
        JasperoConfirmationsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Then create the component in a root component (you can create it anywhere but you can only use it in that component on any lower ones).

<jaspero-confirmations [defaultSettings]="options"></jaspero-confirmations>

How To Use

You need to import the ConfirmationService in your component:

constructor(private _confirmation: ConfirmationService) {}

Then use the create(title: any, message: any, settings: ConfirmSettings) method to initiate the confirmation modal.

open() {
    this._confirmation.create('Do something?', 'You should really just do it.')
        // The confirmation returns an Observable Subject which will notify you about the outcome
        .subscribe((ans: ResolveEmit) => console.log(ans))
}

ResolveEmit

This is returned by the create() method.

export interface ResolveEmit {
    // Returns this if modal resolved with yes or no
    resolved?: boolean;
    // If the modal was closed in some other way this is removed
    closedWithOutResolving?: string;
}

If the modal was closed by clicking on yes/no this is returned:

{resolved: true // false if no was pressed}

If the modal was closed in any other way:

{closedWithOutResolving: 'overlayClick' // reason for closing}

Options

Available settings:

export interface ConfirmSettings {
    overlay?: boolean; // Default: true
    overlayClickToClose?: boolean; // Default: true
    showCloseButton?: boolean; // Default: true
    confirmText?: string | TemplateRef; // Default: 'Yes'
    declineText?: string | TemplateRef; // Default: 'No'
}

You can provide the settings as input to the <jaspero-confirmations></jaspero-confirmations> component. Making the settings default for each created alert. However you can also override the settings by passing them in the create() method.

Note:

The title, message, confirmText and declineText properties can all be either a string an html string or a TemplateRef.