coo-dialog

THIS IS A WORK IN PROGRESS - wait for a final release, before installing, but please, come again!

This is an Angular 2 Module for having standard Pop Up Dialogs with Bootstrap 4 Styling

Visit our Demo Page

Table of Contents

• Install
• Develop
• Setup
• Usage
• API
• License

Install

npm install coo-dialog

Setup

Import the CooDialog Module to your Project

import { CooDialogModule } from '@coodoo/coo-dialog';

@NgModule({
    imports : [ CooDialogModule, ... ],
    [...]
})

Inject the DialogService in the constructor of your component

import { DialogService } from '@coodoo/coo-dialog';
[...]
constructor(private dialogService: DialogService){}

Optional: Update your angluar-cli.json with the styles from the installed bootstrap version or your own

"styles": [
        "./src/styles.css",
        "./../node_modules/bootstrap/dist/css/bootstrap.css"
      ],

Usage

Every Service call will return a promise with the information about the closing of the dialog. In the then function the approval of the Dialog will be catched in the catch block the dismissal. The data will contain an object with the key status for the information about the state. In the Prompt dialog there will also be a value key with the information from the input field. Alert and Confirm only have a accept button so yu can only close them and get the status information in the then block.

const dialogOption: DialogConfiguration = new DialogConfiguration(`Your Message Content here`, new DialogSettings('Decline', 'Approve'));

this._dialog.alert(dialogOption);

this._dialog.prompt(dialogOption)
    .then((data) => {
        data.status;
        data.value;
    })
    .catch(() => {});

this._dialog.confirm(dialogOption);

API Dialog Service

public function alert(dialogConfiguration: DialogConfiguration)
public function prompt(dialogConfiguration: DialogConfiguration)
public function confirm(dialogConfiguration: DialogConfiguration)

API Dialog Configuration

/**
* The Constructor of the DialogConfiguration model
* @param {string} msg
* @param {DialogSettings} settings
* @param {DialogButtonPosition} buttonPosition
*/
constructor(msg: string, settings: DialogSettings = new DialogSettings(), buttonPosition: DialogButtonPosition = new DialogButtonPosition()) {}

Example

new DialogConfiguration('Nachricht welche angezeigt werden soll', new DialogSettings(), new DialogButtonPosition());

/**
* Constructor of Dialog Settings Module
* The Object Containing the text for the decline and the approve button
*
* @param {string} textDecline
* @param {string} textApprove
* @param {boolean} promptTextRequried
* @param {string} prompMessageTextLabel
* @param {boolean} showIcon
*/
constructor(textDecline: string = '', textApprove: string = '', promptTextRequried: boolean = false, promptMessageTextLabel: string = '', showIcon: boolean = false) {}

Example

new DialogSettings('Abbrechen', 'Ok', false, '');

/**
* Constructor of DialogButtonPosition Module
* The Object Containing the position class name for the button.
* It could be decline-left or decline-right || approve-left or approve-right
*
* @param {string} positionDecline
* @param {string} textApprove
*/
constructor(positionDecline: string = 'decline-right', positionApprove: string = 'approve-right') {}

Example

new DialogButtonPosition('decline-left');

License

MIT © coodoo