ngm-common-dialogs
Provides common dialogs components and a simple to use service for angular material
After developing with angularjs material and got used to the simple use of the provided dialogs I thought it will be nice to have them also in the new angular material, so I build the dialogs which were provided then and an extra dialog which I find really necessary and fun to use.
The Dialogs
- Alert Dialog
- Confirm Dialog
- Prompt Dialog
- Loading Dialog
The Service
- Common Dialog Service
Angular and Angular Material supported version
Angular 4.X.X and Angular Material 2.X.X
Demo
https://embed.plnkr.co/I6B2JZ/
Installation
npm i --save ngm-common-dialogs
In your app.module.ts
you need to import the package, don't forget to import all its dependencies before.
;;;
## Usage
### Common Dialog Service
The service is very simple to use, all you need to do is to inject it to your component and than call the right show dialog function. All the functions returns a simple ES6 Promise
.
; ;
## API
### Common Dialog Service
### showAlert (options)
options
title
: The titlemessage
: The messageokButton
: The text of the ok button,default
is ok
return
an ES6Promise
after the dialog was closed
showConfirm (options)
options
title
: The titlemessage
: The messagecancelButton
: The text of the cancel button,default
is cancelyesButton
: The text of the yes button,default
is yes
return
an ES6Promise
after the dialog was closed. It willresolve
if yes was clicked orreject
with the valuefalse
if the cancel button was clicked
showPrompt (options)
options
title
: The titlemessage
: The messageinputLabel
: The floating label of the input in the dialogcancelButton
: The text of the cancel button,default
is cancelokButton
: The text of the ok button,default
is ok
return
an ES6Promise
withresult
which is the text which was entered
### showLoading (options)
options
title
: The titlepromise
: ThePromise
that be resolved while the loading dialog will be shown
return
an ES6Promise
withresult
which is the result of the given promise. If the given promise rejected the promise will also reject (in that case you need to use catch instead of then)
Native Components
When you open the dialog you must supply the right component's data structure, each component has it own class
that represents his data structure.
AlertDialogComponent
Represents a basic alert dialog component.
AlertDialogData
title
: The titlemessage
: The messageokButton
: The text of the ok button,default
is ok
ConfirmDialogComponent
When the cancel button is clicked the closed value of the dialog is false
and when the yes button is clicked its true
.
ConfirmDialogData
title
: The titlemessage
: The messagecancelButton
: The text of the cancel button,default
is cancelyesButton
: The text of the yes button,default
is yes
PromptDialogComponent
The use of this dialog is to get an input from the user, it will show a title, message and an input with the given input label, the result is the input value.
PromptDialogData
title
: The titlemessage
: The messageinputLabel
: The floating label of the input in the dialogcancelButton
: The text of the cancel button,default
is cancelokButton
: The text of the ok button,default
is ok
LoadingDialogComponent
Resolves the given promise
, take the result, wrap it with Promise.resolve()
and return it as the dialogResult
, if the promise was rejected the error value will be wrapped with Promise.reject()
and return it as the dialogResult
.
LoadingDialogData
title
: The titlepromise
: ThePromise
that be resolved while the loading dialog will be shown
Example Of Component Usage
;