Convert any component to a dialog.
Import the NgxPopoverDialogModule
to your module.
Which imports from:
import { NgxPopoverDialogModule } from "ngx-popover-dialog";
When you'd like to load default styling for the backdrop op you modo you'll have to import the following CSS.
@import '~ngx-popover-dialog/css/prebuild.css';
Extend the Component you'd like to use as a modal from Modal
and update the constructor to implement the OverlayToken
.
Files can be imported from:
import { Modal, OVERLAY_TOKEN, OverlayToken, ModalService } from "ngx-popover-dialog";
Don't forget to update your constructor, it would look something like this:
constructor(@Inject(OVERLAY_TOKEN) protected overlay: OverlayToken, protected modalService: ModalService) {
super(overlay, modalService);
}
We can create a modal from anywhere.
We can simply import the ModalService
from:
import { ModalService } from "ngx-popover-dialog";
You can opening a modal by calling the createModal
method.
For example:
const modal = this.modalService.createModal(FancyModalComponent);
The first parameter will be the component you'd like to use and the second parameter will be the data you'd like to provide to the modal.
Inside a modal component you can call the this.close();
method to close the popover, this is possible due to the fact that the component inherits from Modal
.
Data passed in the second parameter can be accessed inside the modal component by reading the following property:
this.overlay.data;
Right now a modal comes with two callbacks onClose
and onSave
.
These can be called by using the following code:
const modal = this.modalService.createModal(FancyModalComponent);
modal.onClose.then(() => {
console.log("Modal closed");
});
modal.onSave.then((data) => {
console.log(data);
});