import { NgxVtModalModule } from 'ngx-vt-modal';
...
imports: [
NgxVtModalModule.forRoot({...defaultOptions}),
...
]
## Usage
```typescript
// Modal opener component or service
constuctor(
private modalService: NgxVtModalService;
){}
openModal(): void {
this.modalService.open(DialogComponent);
}
// or
openModal(): void {
const modalRef = this.modalService.open(DialogComponent, {
size: NgxVtModalSize.SMALL,
useEsc: true,
data: {...any}
});
// build-in Event closeModal$
modalRef.closeModal$
.subscribe(data => {
if(data?.result === 'OK') {
// do anything
}
});
// or your custom Event
modalRef.myCustomEvent$
.subscribe(data => {
// do anything
});
}
```
```typescript
@Component({
...
})
export class DialogComponent{
@Input() data; // data from NgxVtModalOptions object
@Output() myCustomEvent$ = new EventEmitter();
constuctor(
private modalService: NgxVtModalService
){}
onDismiss(): void {
this.modalService.close();
}
onClose(): void {
this.modalService.close({result: 'OK', ...data})
// or with custom Event
this.myCustomEvent$.next({...data});
this.modalService.close();
}
}
```
## Options
| Option | Mandatory option |
Data type |
Default value |
|---|---|---|---|
|
useEsc Close the modal with escape key |
No | boolean | false |
|
closeOnBackdropClick
Close the modal on the backdrop click |
No | boolean | false |
|
draggable
Make the modal draggable |
No | boolean | true |
|
showHeader
Show header of the modal |
No | boolean |
|
|
title Modal title |
No | string | ' ' (empty string), when showHeader is true |
|
showCloseButton Show close button |
No | boolean |
|
|
class Custom css class for the modal |
No | string | ' ' (empty string) |
|
size Modal size |
No |
enum NgxVtModalSize:
|
NgxVtModalSize.DEFAULT |
|
data Modal data |
No | Object: any | null |