https://github.com/agilie/ng2-dialog-window
Modal/dialog windows and popups module for Angular applications.
https://github.com/agilie/ng2-dialog-window
angular dialog-window javascript ng2 popup
Last synced: about 1 year ago
JSON representation
Modal/dialog windows and popups module for Angular applications.
- Host: GitHub
- URL: https://github.com/agilie/ng2-dialog-window
- Owner: agilie
- License: mit
- Created: 2017-05-31T14:40:19.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-12T19:24:33.000Z (almost 9 years ago)
- Last Synced: 2025-05-04T06:03:05.374Z (about 1 year ago)
- Topics: angular, dialog-window, javascript, ng2, popup
- Language: JavaScript
- Homepage: https://agilie.com
- Size: 20.5 KB
- Stars: 17
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.MD
- License: LICENSE.MD
Awesome Lists containing this project
README
[](https://github.com/agilie/ng2-dialog-window)
# ng2-dialog-window
Dialog window module for Angular (Angular 2) applications which allows to open dialog window using custom components. Any data could be easily send to component.
## Installation
To install this module, run:
```bash
$ npm install @agilie/ng2-dialog-window --save
```
## Usage
```typescript
import { NgModule } from '@angular/core';
import { YourDialogWindowComponent } from './component/path'
import { AppComponent } from './app.component'
import { Ng2DialogWindowModule, Ng2DialogWindowService } from '@agilie/ng2-dialog-window';
@NgModule({
imports: [
// ...
Ng2DialogWindowModule
],
declarations: [
AppComponent,
// ....
YourDialogWindowComponent
],
providers: [
//...
Ng2DialogWindowService
],
//...
entryComponents: [
YourDialogWindowComponent
],
})
export class AppModule {
}
```
```typescript
import { Component, ViewContainerRef } from '@angular/core';
import { Ng2DialogWindowService } from '@agilie/ng2-dialog-window';
import { YourDialogWindowComponent } from './component/path'
@Component({
selector: 'app-component',
template: 'Open modal'
})
export class AppComponent {
constructor( private dialog: Ng2DialogWindowService, private viewContainer: ViewContainerRef) {
}
openModal() {
this.dialog.openModal(this.viewContainer, {component: YourDialogWindowComponent})
}
}
```
You need to extend your dialog component from ```Ng2DialogWindowComponent``` to inherit base methods of dialog window and wrap your template in ```ng2-dialog-window-component``` tag to extend dialog window base styles.
*It seems like Angular doesn't provide any simple way to inherit styles from another component. Feel free to create an issue ticket if you think I am wrong.*
```typescript
import { Component } from '@angular/core';
import { Ng2DialogWindowComponent } from '@agilie/ng2-dialog-window'
@Component({
selector: 'my-dialog-window',
template: ''
})
export class YourDialogWindowComponent extends Ng2DialogWindowComponent {
}
```
## API
Here is the list of accessible methods that you can use:
#### ```Ng2DialogWindowService```
```.openModal(viewContainerRef, options)```
Method allows to open dialog window. It creates new dialog instance on each call. It accepts viewContainerRef of component and options object as arguments.
```viewContainerRef {viewContainerRef}``` - viewContainerRef of component from which you call ```openModal``` method
##### ```options```
```component {Component}``` - dialog window component
```data {String} | {Object} | {Array}``` - any serializable data that you want to be stored in dialog component and be available from ```dialogData```.
#### Dialog component
```close()``` - extended method from base dialog component. Closes dialog window.
## TODOs
1. Add more options (closeByClick, showCloseButton etc.)
2. Add possibility to open dialog window from services
3. Add animation
4. Add demo
5. Add tests
6. TBD
## Troubleshooting
Problems? Check the [Issues](https://github.com/agilie/ng2-dialog-window/issues) block
to find the solution or create a new issue that we will fix asap. Feel free to contribute.
## Author
This Angular module is open-sourced by [Agilie Team](https://www.agilie.com)
## Contributors
[Maks Nechesonov](https://github.com/NechiK)
## Contact us
If you have any questions, suggestions or just need a help with web or mobile development, please email us at . You can ask us anything from basic to complex questions.
We will continue publishing new open-source projects. Stay with us, more updates will follow!
## License
The [MIT](LICENSE.MD) License (MIT) Copyright © 2017 [Agilie Team](https://www.agilie.com)