{"id":21514183,"url":"https://github.com/greentube/ngx-modal","last_synced_at":"2025-05-07T17:50:37.509Z","repository":{"id":18673408,"uuid":"84928224","full_name":"Greentube/ngx-modal","owner":"Greentube","description":"Dynamic modal dialog for Angular","archived":false,"fork":false,"pushed_at":"2023-07-21T14:08:59.000Z","size":3958,"stargazers_count":56,"open_issues_count":69,"forks_count":37,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-30T20:51:23.672Z","etag":null,"topics":["angular","dialog","modal","modal-dialogs","ngx","ngx-modal"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Greentube.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-14T09:08:28.000Z","updated_at":"2024-06-06T08:39:53.000Z","dependencies_parsed_at":"2024-06-18T15:43:28.168Z","dependency_job_id":"e9c3a8a9-21c6-42d9-8fee-652b795e8f7e","html_url":"https://github.com/Greentube/ngx-modal","commit_stats":{"total_commits":74,"total_committers":9,"mean_commits":8.222222222222221,"dds":"0.41891891891891897","last_synced_commit":"5e210c98fff3a1bb798bbd9321a187778cd58558"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Greentube%2Fngx-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Greentube%2Fngx-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Greentube%2Fngx-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Greentube%2Fngx-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Greentube","download_url":"https://codeload.github.com/Greentube/ngx-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252931391,"owners_count":21827104,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","dialog","modal","modal-dialogs","ngx","ngx-modal"],"created_at":"2024-11-23T23:43:17.911Z","updated_at":"2025-05-07T17:50:37.479Z","avatar_url":"https://github.com/Greentube.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx modal dialog\n[![Build Status](https://travis-ci.org/Greentube/ngx-modal.svg?branch=master)](https://travis-ci.org/Greentube/ngx-modal)\n[![npm version](https://img.shields.io/npm/v/ngx-modal-dialog.svg)](https://www.npmjs.com/package/ngx-modal-dialog)\n\u003e Dynamic modal dialog for Angular that does not sit on DOM waiting to be triggered, but rather gets injected upon need.\n\nMade with Bootstrap 4 styles in mind, but configurable to any framework or custom set of styles.\nSimple demo can be found [here](https://greentube.github.io/ngx-modal/demo).\n\n\u003e This documentation is for version 4.x.x and Angular 10+. If you are using older version of Angular please use [3.x version for v6-v8](https://github.com/Greentube/ngx-modal/tree/v3.x.x) or [2.x version for v2-v5](https://github.com/Greentube/ngx-modal/tree/v2.x.x).\n\n# Table of contents:\n- [Installation](#installation)\n- [How it works](#how-it-works)\n- [Styles and visuals](#styles-and-visuals)\n- [Usage](#usage)\n- [API](#api)\n    - [ModalDialogService](#modaldialogservice)\n    - [IModalDialog](#imodaldialog)\n    - [IModalDialogOptions](#imodaldialogoptions)\n    - [IModalDialogButton](#imodaldialogbutton)\n    - [IModalDialogSettings](#imodaldialogsettings)\n- [License](#license)\n\n## Installation\n\n```\nnpm install --save ngx-modal-dialog\n```\n## How it works\nModal dialog uses `ComponentFactoryResolver` to inject the given child component to the dialog.\n[ModalDialogService](#modaldialogservice) makes sure that only one instance of a modal dialog is opened at a time.\nWith [IModalDialogOptions](#imodaldialogoptions) you can define which component will be rendered inside the dialog and configure it based on your needs.\n\nYou can further use action buttons to control modal dialog from external component or child component. If action performed on button click is successful, modal dialog will close. Otherwise it will alert user.\n\n## Styles and visuals\n\n`Ngx-modal-dialog` is intended to be used with Bootstrap 4, however you can apply your custom styles from your desired UI framework by providing class names in [IModalDialogSettings](#imodaldialogsettings).\n\n## Usage\n\n1. Include the `ngx-modal` module in your application at any place. The recommended way is to add `forRoot` initialization in the main app module.\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { ModalDialogModule } from 'ngx-modal-dialog';\n\n@NgModule({\n    imports: [\n        BrowserModule,\n        ModalDialogModule.forRoot()\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n2. Create a custom component that implements `IModalDialog` or use the `SimpleModalDialog` as a child component.\n\nCustom component should be inserted into both `declarations` and `entryComponents` in the NgModule they are part of. `entryComponents` has to be used since component is dynamically inserted onto the page and Angular is not aware of it.\n\n3. Inject the `ModalDialogService` where you want to open the dialog. Call `openDialog` passing parent `ViewContainerRef` and partial `IModalDialogOptions` object:\n```ts\nconstructor(modalService: ModalDialogService, viewRef: ViewContainerRef) { }\n\nopenNewDialog() {\n  this.modalService.openDialog(this.viewRef, {\n    title: 'Some modal title',\n    childComponent: SimpleModalComponent\n  });\n}\n```\n4. Arbitrary define `actionButtons` in modal dialog options or child component to control modal dialog.\n\n```ts\nclass MyModalComponent implements IModalDialog {\n  actionButtons: IModalDialogButton[];\n\n  constructor() {\n    this.actionButtons = [\n      { text: 'Close' }, // no special processing here\n      { text: 'I will always close', onAction: () =\u003e true },\n      { text: 'I never close', onAction: () =\u003e false }\n    ];\n  }\n\n  dialogInit(reference: ComponentRef\u003cIModalDialog\u003e, options: Partial\u003cIModalDialogOptions\u003cany\u003e\u003e) {\n    // no processing needed\n  }\n}\n```\n\nAction button can be of two types:\n- with return value  \n  Used for controlling the dialog life.  \n  If value is `truthful` (true, successful Promise or Observable) than it will close the dialog  \n  If value is `falsy` (false, rejected Promise or failed Observable) it will trigger alert style and not close the dialog.\n- without return value  \n  Has no direct effect on dialog. Can be used to trigger some arbitrary functionality (e.g. copy values to clipboard)\n\n## API\n\n### ModalDialogService\n#### Methods:\n- `openDialog(target: ViewContainerRef, options: Partial\u003cIModalDialogOptions\u003cT\u003e\u003e = {})`: Closes existing and opens a new modal dialog according to IModalDialogOptions.\n`T` represents a type of options `data` field. If you don't care about strong typing just pass `any`.\n\n### IModalDialog\nEvery component that is used as modal dialog must implement `IModalDialog`.\n#### Methods:\n- `dialogInit(reference: ComponentRef\u003cIModalDialog\u003e, options: Partial\u003cIModalDialogOptions\u003cany\u003e\u003e) =\u003e void`\nMandatory: `true`\nDefault: -\nThis method is called after initialization of child component. Purpose of the method is to pass necessary information from outer scope to child component.\n#### Properties:\n- `actionButtons`\nMandatory: `false`\nDefault: -\nType: `string`\nModal heading text\n\n### IModalDialogOptions\n#### Interface:\n```ts\ninterface IModalDialogOptions\u003cT\u003e {\n  title: string;\n  childComponent: IModalDialog;\n  onClose: ModalDialogOnAction;\n  actionButtons: IModalDialogButton[];\n  data: T;\n  placeOnTop: boolean;\n  settings: IModalDialogSettings;\n  closeDialogSubject: Subject\u003cvoid\u003e;\n}\n```\nThis is generic interface, where `T` is arbitrary type of `data` section.\n#### Interface details:\n- title: `string`  \nModal heading text\n\n- childComponent: `any`  \nComponent type that will be rendered as a content of modal dialog. Component must implement `IModalDialog` interface.\n\n- onClose(): `ModalDialogOnAction`\nFunction to be called on close button click. In case of Promise and Observable, modal dialog will not close unless successful resolve happens. In case of boolean, modal dialog will close only if result is `truthful`.\n\n- actionButtons: `Array\u003cIModalDialogButton\u003e`  \nFooter action buttons for control of modal dialog. See [IModalDialogButton](#imodaldialogbutton).\nAction buttons defined in child component have priority over action buttons defined via options.\nAction buttons close the modal dialog upon successful operation.\n\n- data: `T`  \nArbitrary data that will be passed to child component via `dialogInit` method.\n\n- placeOnTop: `boolean`\nFlag stating whether opening the modal dialog should close all the other modal dialogs, or modal should be rendered on top of existing ones.\n\n\n- settings: `IModalDialogSettings`  \nAdditional settings for granular configuration of modal dialog. See [IModalDialogSettings](#imodaldialogsettings).\n\n- closeDialogSubject:`Subject\u003cvoid\u003e`  \nCustom modal closing subject. Can be used to manually trigger modal dialog close from within the child component. \n\n### IModalDialogButton\n#### Interface:\n```ts\ninterface IModalDialogButton {\n  text: string;\n  buttonClass?: string;\n  onAction?: ModalDialogOnAction;\n}\n```\n#### Interface details:\n- text: `string`  \nCaption/text on the button\n- buttonClass: `string`  \nDefault: `btn btn-primary`  \nClass name of button\n- onAction(): `Promise\u003cany\u003e | Observable\u003cany\u003e | boolean`  \nFunction to be called on button click. In case of Promise and Observable, modal dialog will not close unless successful resolve happens. In case of boolean, modal dialog will close only if result is `truthful`.\n#### ModalDialogOnAction type\n```ts\ntype ModalDialogOnAction = () =\u003e Promise\u003cany\u003e | Observable\u003cany\u003e | boolean | void;\n```\nFunction returning Promise, Observable, boolean or no value. Modal dialog will close automatically if return of action is:\n* Promise, once promise gets resolved\n* Observable, once observable successfully finishes\n* boolean and value is `true`\n\nAction button will initiate alert behavior if return is:\n* Promise, once promise gets rejected\n* Observable, once observable fails or throws error\n* boolean and value is `false`\n\nIf action button returns `void`, there are no side effects.\n\n### IModalDialogSettings\n#### Interface\n```ts\ninterface IModalDialogSettings {\n  overlayClass: string;\n  overlayAnimationTriggerClass: string;\n  modalClass: string;\n  modalAnimationTriggerClass: string;\n  contentClass: string;\n  headerClass: string;\n  headerTitleClass: string;\n  closeButtonClass: string;\n  closeButtonTitle: string;\n  bodyClass: string;\n  footerClass: string;\n  alertClass: string;\n  alertDuration: number;\n  buttonClass: string;\n  notifyWithAlert: boolean;\n}\n```\n\n#### Interface details:\n- overlayClass: `string`  \nDefault: `modal-backdrop fade show`  \nStyle of the backdrop overlay layer\n- overlayAnimationTriggerClass: `string`  \nDefault: `show`  \nClass that triggers the initial/ending animation of modal overlay\n- modalClass: `string`  \nDefault: `modal fade ngx-modal`  \nStyle of modal wrapper\n- modalAnimationTriggerClass: `string`  \nDefault: `show`  \nClass that triggers the initial/ending animation of modal wrapper\n- modalDialogClass: `string`  \nDefault: `modal-dialog modal-dialog-centered`  \nStyle of modal dialog\n- contentClass: `string`  \nDefault: `modal-content`  \nModal dialog inner content class\n- headerClass: `string`  \nDefault: `modal-header`  \nModal dialog header class\n- headerTitleClass: `string`  \nDefault: `modal-title`  \nModal dialog header title class\n- closeButtonClass: `string`  \nDefault: `close glyphicon glyphicon-remove`  \nModal dialog header close button class\n- closeButtonTitle: `string`  \nDefault: `CLOSE`  \nClose button title\n- bodyClass: `string`  \nDefault: `modal-body`  \nModal dialog body class\n- footerClass: `string`  \nDefault: `modal-footer`  \nModal dialog footer class\n- alertClass: `string`  \nDefault: `ngx-modal-shake`  \nStyle to be appended to dialog once alert happens\n- alertDuration: `number`  \nDefault: `250`  \nDuration of alert animation\n- buttonClass: `string`  \nDefault: `btn btn-primary`  \nStyle of footer action buttons\n- notifyWithAlert: `number`  \nDefault: `true`  \nDefine whether modal should alert user when action fails\n\n## License\nLicensed under MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreentube%2Fngx-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreentube%2Fngx-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreentube%2Fngx-modal/lists"}