It is a library to makes modals easier in Angular (2+), has no dependencies, but plays well with bootstrap or other frameworks.
- Create clear and reusable modal components.
- It makes managing modals painless and clearer.
- Extend the ModalComponent class and implement any content you want.
- Angular 9 with new ng-packagr updates supplied by the Angular tooling team themselves :bowtie:
- Angular v8 also compatible with Angular Elements (December 2019)
- Angular v4-7
You can see the demo in action here - https://ngx-simple-modal-demo.stackblitz.io You can have a play with this demo code here - https://stackblitz.com/edit/ngx-simple-modal-demo?embed=1&file=styles.css
NG9 Preliminary test can be found here - https://codesandbox.io/s/ngx-simple-modal-ng9-durdl
npm install ngx-simple-modal
Step 0. assuming you want to use our built in styles
To create a custom modal box, you can start with the following example, wich is going to create a modal with a header, body and footer. The css already provide a transparency overlay, opacity and slide animation.
Inside your angular-cli.json update your styles sections to include our CSS
"styles": [ "styles.css", "../node_modules/ngx-simple-modal/styles/simple-modal.css" ],
But i use SASS/SCSS?
We got you covered, you can
@import '../node_modules/ngx-simple-modal/styles/simple-modal.scss' into what ever root based scss global style you want. Update the relative path depending on where you want to pull it in.
Assumed HTML template if you want our base styles
<!-- Your Title --><!-- Modal custom content --><!--Footer to add button controlex.: <button (click)="close()">Cancel</button>-->
Step 1. Import the 'SimpleModalModule' module
By default, modal placeholder will be added to AppComponent. But you can select custom placeholder (i.e. document body):
If you want a container that is not yet in the DOM during the intial load you can pass a promiseLike function instead to container e.g.
elementPromisingFn is anything you want as long as its resolvement returns a nativeElement node from the DOM.
Setting up modal defaults globally
An optional second parameter takes a global object of type SimpleModalOptions (all fields required).. you can spread these with the defaultSimpleModalOptions if you like.
OR, if you need to control behaviour more granularly, you can provide the configuration in modules or locally like so
Step 2. Create your modal component
Your modal is expected to be extended from SimpleModalComponent. SimpleModalService is generic class with two arguments:
- input modal data type (data to initialize component);
- modal result type;
Therefore SimpleModalService is supposed to be a constructor argument of SimpleModalComponent.
Step 3. Register created component to module
Add component to declarations and entryComponents section, because the component will be created dynamically.
Step 4. Usage
What if i want to use Bootstrap 3 or 4?
We got you! An example boostrap alert modal component.
As you can see, the implementation is completely in your control. We're just here to help you create, configure, add, track inputs, and remove.
Super class of all modal components.
/*** Dialog abstract class* @template T1 - input modal data* @template T2 - modal result*/abstract
Service to show and hide modals
This project was seeded by https://github.com/ankosoftware/ng2-bootstrap-modal because the author was not responding to pull requests so decided to take what they had started and update and run with it. Along the way we put some of our own opinions on it and added some tests, enough changes that it stopped being a viable PR for the original without serious breaking changes.