https://github.com/zurfyx/angular-custom-modal
Angular2+ Modal / Dialog (with inner component support).
https://github.com/zurfyx/angular-custom-modal
angular dialog modal typescript
Last synced: 11 months ago
JSON representation
Angular2+ Modal / Dialog (with inner component support).
- Host: GitHub
- URL: https://github.com/zurfyx/angular-custom-modal
- Owner: zurfyx
- License: mit
- Created: 2017-10-30T09:37:54.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-24T21:56:03.000Z (almost 8 years ago)
- Last Synced: 2025-04-30T17:05:45.720Z (11 months ago)
- Topics: angular, dialog, modal, typescript
- Language: TypeScript
- Homepage: https://zurfyx.github.io/angular-custom-modal/
- Size: 950 KB
- Stars: 30
- Watchers: 2
- Forks: 14
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Custom Modal
[](https://www.npmjs.com/package/angular-custom-modal)
[](https://travis-ci.org/zurfyx/angular-custom-modal)
> Angular2+ Modal / Dialog (with inner component support).
A continuation of https://stackoverflow.com/a/46949848
## Demo
[zurfyx.github.io/angular-custom-modal](https://zurfyx.github.io/angular-custom-modal/)
## Install
```
npm install angular-custom-modal
```
## Features
Core:
- Light: no CSS / JS frameworks attached
- [Bootstrap 3 & 4 CSS compatible](#bootstrap)
- Custom modal header, body and header
- [Modal stacking support](#nested-modal)
- Lazy inner component initialization, and `ngOnDestroy`(ed) when modal is closed
Minor:
- Optional CSS animations
- Optional parent scrolling when modal is visible
- Escape or button to close modal
## Usage
app.module.ts
```
imports: [
...
ModalModule,
...
],
...
})
```
### Raw HTML
app.component.html
```
Raw HTML inside modal
HTML inside modal
HTML content inside modal
```
### Component inside Modal
my-component.component.ts
```
@Component({
selector: 'app-my-component',
templateUrl: 'my-component.component.html',
})
export class AppModalContentComponent { }
```
my-component.component.html
```
My component's HTML
```
app.component.html
```
Component inside modal
Component inside modal
```
### Nested Modal
app.component.html
```
Nested modal
Nested modals can be created by simply adding a <modal> inside a <modal>
...
Open nested modal
This is the nested modal content.
```
See [example source code](https://github.com/zurfyx/angular-custom-modal/tree/master/example/app) for more information.
**Why ng-template?**
ng-template prevents the parent component from initializing the component. Only when the modal library finds it convenient the component will be initialize and visible to the user. Hence, it preserves the natural `ngOnInit()` and `ngOnDestroy()` that we expect.
Similar libraries which make use of `` and its [content transclution strategy](https://scotch.io/tutorials/angular-2-transclusion-using-ng-content#toc-multi-slot-transclusion), do not prevent the component from initializing, but rather just hide it. The component was already initialized in the parent component.
References:
https://angular.io/api/common/NgTemplateOutlet
https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/
https://medium.com/claritydesignsystem/ng-content-the-hidden-docs-96a29d70d11b
https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e
## Styles
The library carries the minimum generic styles. Beautifying it is up to you.
### Default styles
You can find the demo copy-paste styles in [modal.css](https://github.com/zurfyx/angular-custom-modal/blob/master/example/app/modal.css).
### Bootstrap
Bootstrap users require no additional CSS other than the Bootstrap library (either version 3 or 4).
## API
### ModalComponent
| Name | Type | Description |
| ----| ----- | ----------- |
| header | @ContentChild('modalHeader'): TemplateRef | Angular Template (``) to use as header. |
| body | @ContentChild('modalBody'): TemplateRef | Angular Template (`ng-template`) to use as body. |
| footer | @ContentChild('modalFooter'): TemplateRef | Angular Template (`ng-template`) to use as footer. |
| closeOnOutsideClick | @Input(): boolean = true | When set to `true` modal will close when a click is performed outside the modal container. |
open | () => void | Opens the modal.
| close | () => void | Closes the modal. |
| isTopMost | () => boolean | Returns true is the modal is the top most modal, or false if it is underneath another modal. |
## Special thanks
To [Stephen Paul](https://stackoverflow.com/users/1087131/stephen-paul) for the [initial Angular 2 Modal version](https://stackoverflow.com/a/40144809/2013580).
## License
MIT © [Gerard Rovira Sánchez](//zurfyx.com)