# ngx-modal2 > Open modal window for your Angular X application Latest version **7.0.0** (published 2019-08-30) · MIT license · 0 weekly downloads ## Install ```sh npm install ngx-modal2 pnpm add ngx-modal2 yarn add ngx-modal2 bun add ngx-modal2 ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 7.0.0 | | Published | 2019-08-30 | | First published | 2017-09-04 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 423.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | iamthes | | Keywords | modal, ngx, angular2 | ## Links - npm: https://www.npmjs.com/package/ngx-modal2 - npm.io page: https://npm.io/package/ngx-modal2 ## Dependencies (1) - [tslib](https://npm.io/package/tslib.md) ^1.10.0 ## Alternatives - [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads - [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads - [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads - [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads - [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads ## Recent versions - 7.0.0 (latest) — 2019-08-30 - 5.0.0-beta.1 (beta) — 2019-05-27 - 6.0.0 — 2019-08-21 - 5.0.0 — 2019-06-02 - 4.7.2 — 2019-04-09 - 4.7.1 — 2018-08-24 - 4.7.0 — 2018-05-25 - 4.6.8 — 2017-12-11 - 4.6.7 — 2017-11-16 - 4.6.1 — 2017-09-22 - 4.6.0 — 2017-09-22 - 4.5.0 — 2017-09-20 - 4.4.1 — 2017-09-18 - 4.4.0 — 2017-09-18 - 4.3.1 — 2017-09-06 - … 1 more at https://npm.io/package/ngx-modal2/versions ## README # ngx-modal Open modal window for your Angular X application ## INSTALL ``` npm i -S ``` ## USAGE #### Example 1: Route modal 1. Add `` to `AppComponent` template 2. Configure `AppModule` ``` // app.module.ts @NgModule({ imports: [ ModalModule.forRoot(options), RouterModule.forRoot([ { path: 'greet/:user', outlet: 'modal', component: GreetingsModalComponent }, ]), ] }) export class AppModule { } ``` 3. Add link, e.g. `Greetings, Joe!` 4. Create `GreetingsModalComponent` ```ts @Component({ template: ` Example Modal Content ` }) export class GreetingsModalComponent { @ViewChild(ModalComponent) protected modal: ModalComponent; constructor() { } } ``` #### Example 2: Confirm 1. Import `ModalConfirmComponent` 2. Add following markup to your component template ``` Confirm ``` 3. Add `openConfirm` method ```ts export class AppComponent { @ViewChild(ModalConfirmComponent) private confirm: ModalConfirmComponent; confirmSubscription: Subscription; protected openConfirm() { this.confirm.open(); this.confirmSubscription = this.confirm.okay.subscribe(() => { console.log('Okay...'); }); } protected onCloseConfirm() { this.confirmSubscription.unsubscribe(); } } ``` ## CONFIGURATION `ModalModule` has some configuration ``` @NgModule({ imports: [ ModalModule.forRoot(modalOptions), ] }) ``` Where `modalOptions` is defaults of following: ```ts export const defaultOptions: ModalOptions = { popupOpenedClass: 'ngx-modal-popup-opened', isOpenClass: 'ngx-modal-open', isNotificationClass: 'ngx-modal-notification', popupClass: 'ngx-modal-popup', bodyClass: 'ngx-modal-body', headerClass: 'ngx-modal-header', footerClass: 'ngx-modal-footer', contentClass: 'ngx-modal-content', /** * Class for close button in modal-header component. */ buttonCloseClass: 'ngx-modal-button-close', /** * Content in close button tag. */ buttonCloseContent: '×', /** * Navigate back when modal close */ backOnClose: true, hasCloseButton: true, confirmFooterToolbarClass: 'ngx-modal-confirm-footer-toolbar', /** * Class wrapper for modal-confirm2 component buttons toolbar. */ confirmFooterButtonsClass: '', confirmFooterButtonItemClass: '', confirmOkayButtonClass: '', confirmCancelButtonClass: '', /** * When true, when modal closes router.navigate() will be called with options relativeTo: activatedRoute.parent */ closeRelativeToParent: false, /** * Content box class for modal-confirm3 component */ confirmContentBoxClass: '', }; ``` ## API #### ModalModule * `ModalModule.forRoot(modalOptions)` override default options * `ModalModule.forChild(modalOptions)` set modal options for this module #### ModalComponent Selector: `modal` Inputs: * `routed: boolean` Set flag indicating that modal is routed * `isOpen: boolean` Open modal when component initialized * `isNotification: boolean` * `settings: Partial` Custom settings for modal, supported settings: routeOnClose, routeOutlets, backOnClose, isOpenClass, isNotificationClass, popupOpenedClass Outputs: * `closemodal: EventEmitter` * `openmodal: EventEmitter` Methods: * `open: void` Open modal * `close: void` Close modal #### ModalConfirmComponent Selector: `modal-confirm` Inputs: * `title: string` * `content: string` * `isNotification: boolean` If true add notification class popup * `settings: Partial` * `okayLabel: string = 'Okay'` Okay button label * `cancelLabel: string = 'Cancel'` Outputs: * `closemodal: EventEmitter` Properties: * `result`: readonly Subject` Result of confirm * `isOpen: readonly boolean` * `okay: readonly Observable` Observable of result filtered to true Methods: * `open` Open modal confirm #### ModalConfirm2Component Selector: `modal-confirm2` Inputs: See `ModalConfirmComponent` Properties: See `ModalConfirmComponent` Methods: See `ModalConfirmComponent` ModalConfirm2Component inherits ModalConfirmComponent, the only difference is markup. In ModalConfirm2Component `modal-footer` is not used. #### ModalConfirm3Component Selector: `modal-confirm3` Inputs: See `ModalConfirmComponent` Properties: See `ModalConfirmComponent` Methods: See `ModalConfirmComponent` ModalConfirm3Component inherits ModalConfirmComponent, the only difference is markup. Used more advanced markup in footer. #### ModalHeaderComponent Selector: `modal-header` Inputs: * `title: string` * `hasCloseButton: boolean` * `closeButtonId: string` Properties: * `closeEventEmitter: EventEmitter` #### ModalFooterComponent Selector: `modal-footer` #### ModalContentComponent Selector: `modal-content` #### ModalConfirmService Create modal confirm popup dynamically. Methods: * `open(viewContainerRef: ViewContainerRef, componentType: Type, settings?: Partial): Observable` Example usage: ```js export class AppComponent { constructor( private modalConfirmService: ModalConfirmService, private viewContainerRef: ViewContainerRef, ) { } openModalConfirmService() { this.modalConfirmService.open(this.viewContainerRef, ModalConfirmComponent) .pipe(take(1)) .subscribe(result => { // true - ok, false - cancel console.log('confirm result', result); }); } } ``` **Note:** You MUST subscribe to observable, otherwise modal will not be closed. ## DEVELOPMENT * `npm run dev` --- _Source: https://npm.io/package/ngx-modal2 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._