Lightweight implementation of modal dialogs for Angular.
To install this library, run:
$ npm install @independer/ng-modal --save
Option 1 - Inside a template of another component
Define your modal dialog inside a template of another component. For example, in your
home.component.html you could have:
I am a Simple DialogThis dialog is defined inside a template of another component.okay!
Then open the dialog as follows:
Option 2 - Component + ModalService
Define your modal dialog as a component and open it programmatically using
I am a Programmatic DialogThis dialog is opened programmatically from code.okay!
Important: Make sure you add your component to
ModalService where you want to open your modal component from. For example:
Option 3 - Router
Define your modal dialog as a component (like in Option 2) and open it by navigating to a route.
I am a Routed DialogThis dialog is opened by navigating to a route
[routeBehavior]="true" - this tells the
modal component to open itself as soon as the router adds it to the DOM, and
after user closes it, navigate back to the previous URL.
Define a route:
Open the modal by navigating to
The library comes with two predefined themes:
independer- our own theme that we use at
bootstrap- https://getbootstrap.com/docs/4.0/components/modal/ (note that you don't need to include this theme if your app already includes Bootstrap styles, see below).
In order to include the styles in your Angular CLI application, add the following to the
styles section of
<theme> with either
If you would like to customize the styles, you can copy the SASS source code from
node_modules/@independer/modal/themes/<theme>/styles.scss to your application and change it the way you need.
Works with standard Bootstrap styles
In case your already use Bootstrap in your app or you would like to use the "official" Bootstrap styles, you don't need
to include any themes in
.angular-cli.json. The library uses the same CSS classes and HTML structure as
modals in Bootstrap, so it works with the standard Bootstrap styles.
See the above examples in action by running the Angular app in the playground folder.
In order to run the example application you need to first build the library and link it to node_modules in the playground folder. Please follow the following steps:
# 1. Install dependenciesyarn install# 2. Build the librarynpm run build# 3. Go to /dist foldercd dist# 4. Create an NPM linknpm link# 4. Go to the "playground" foldercd ../playground# 5. Install dependenciesyarn install# 6. Run the example applicationyarn start
Now you can navigate to
http://localhost:4200 to use the playground app.
Development of the Library
To generate all all the package assets in the
dist folder run:
$ npm run build
To lint all
$ npm run lint
To test the library with the
playground application link the
dist folder using
# In "dist" foldernpm link# in "playground" folder. This step is also done automatically after "yarn install"npm link @independer/ng-modal
MIT © Independer.nl