ng-modal-flexible
A simple, light-weight, highly customizable modal for Angular 2+ projects.
ng-modals-flexible allows you to create a fully functional modal in few lines of code. This modal is fully customizable with no pain and comes default with opening and closing animations.
Installation
npm install ng-modal-flexible --save
API
In the module app.module.ts
:
;; ;; @
Then, in the component
where you have to call modal :
;; @ // Second param for ViewChild is only needed for angular 8+ @ modalOne; modalConfig = buttonOneText: 'OK' escapeToClose: true { /* console.log(`modalClosedFn called !!`); */ } { /* Drop your logic here */ thismodalOne; }
Properties for modalConfig
modalParentClass
(string) : CSS class for modal's parent.
headingText
(string) : Heading text for modal.
headingTextClass
(string) : CSS class for heading text for modal.
showCloseBtn
(boolean) : To show/hide close button. True by default.
closeBtnContent
(string | HTML) : Content for close button. 'X' by default.
closeBtnClass
(string) : CSS class for close button.
contentText
(string) : Main content.
contentTextClass
(string) : CSS class for main content.
buttonOneText
(string) : Text for first button. Button will only be rendered if this has a value.
buttonOneClass
(string) : CSS class for first button.
buttonTwoText
(string) : Text for second button. Button will only be rendered if this has a value.
buttonTwoClass
(string) : CSS class for second button.
buttonThreeText
(string) : Text for third button. Button will only be rendered if this has a value.
buttonThreeClass
(string) : CSS class for third button.
clickOutsideToClose
(boolean) : To close/not close the modal clicking outside of it. True by default.
escapeToClose
(boolean) : To close/not close the modal on escape key press.
showAnimation
(boolean) : To show/hide opening and closing animation.
Events for modal
(buttonOneClicked)
: Event will trigger on button 1 click.
(buttonTwoClicked)
: Event will trigger on button 2 click.
(buttonThreeClicked)
: Event will trigger on button 3 click.
(modalClosed)
: Event will trigger on modal close.