This is an Angular 2 Module for having standard Pop Up Dialogs with Bootstrap 4 Styling
npm install coo-dialog
There are severall npm scripts so you extend this dialog for your needs
npm run start:app -> is starting the Demo Application inside the demo folder with the content of the module under src
npm run test -> is starting the karma instance to run the tests under the src folder
npm run test:watch -> is starting the tests and run them on every change in the src and demo folder
npm run test:coverage -> just prints a common test coverage report
npm run start:app -> start the demo application out of the root folder
npm run build:ngs -> build the coo-dialog with ngc to the dist folder
npm run build:demo -> builds the demo under the demo/dist folder
npm run ts-lint -> lint the code against the given lint config
npm run compodoc -> creates the documentation for this ng modul with the help of compodoc
If you wanna develop on this module it is helpful to link the /src into the /demo/src/app/modules/ folder and import all the needed sources against this folder
ln -s [Path to your working space]/src/ demo/src/app/modules/dialog
With this little trick it is possible to compile the demo with the given build script
Import the CooDialog Module to your Project
@NgModule({
declarations : [ AppComponent ],
imports : [ NgbModule, BrowserModule, FormsModule, HttpModule, DialogModule, CommonModule ],
providers : [ Dialog ],
bootstrap : [ AppComponent ]
})
Update your angluar-cli.json with tje styles form the installed bootstrap version or your own
"styles": [
"./src/styles.css",
"./../node_modules/bootstrap/dist/css/bootstrap.css"
],
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);
public function alert(dialogConfiguration: DialogConfiguration)
public function prompt(dialogConfiguration: DialogConfiguration)
public function confirm(dialogConfiguration: DialogConfiguration)
/**
* 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()) {}
new DialogConfiguration('Nachricht welche angeziegt werden soll', new DialogSettings(), new DialogButtonPosition()); new DialogConfiguration('Nachricht welche angeziegt werden soll', new DialogSettings('Abbrechen', 'Ok'));
/**
* 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) {}
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') {}
new DialogButtonPosition('decline-left');
Small note: If editing the README, please conform to the standard-readme specification.
=============================== Coverage summary ===============================
Statements : 88.89% ( 152/171 )
Branches : 46.81% ( 22/47 )
Functions : 81.82% ( 27/33 )
Lines : 89.86% ( 133/148 )
================================================================================
MIT © coodoo
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent