{"id":13475790,"url":"https://github.com/shlomiassaf/ngx-modialog","last_synced_at":"2025-07-03T00:07:51.595Z","repository":{"id":33544487,"uuid":"37190644","full_name":"shlomiassaf/ngx-modialog","owner":"shlomiassaf","description":"Modal / Dialog for Angular","archived":false,"fork":false,"pushed_at":"2020-12-21T05:24:38.000Z","size":21808,"stargazers_count":685,"open_issues_count":141,"forks_count":239,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-24T05:13:17.940Z","etag":null,"topics":["angular","dialog","modal"],"latest_commit_sha":null,"homepage":"http://shlomiassaf.github.io/ngx-modialog","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/shlomiassaf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-10T10:25:43.000Z","updated_at":"2025-03-05T05:29:00.000Z","dependencies_parsed_at":"2022-08-07T22:00:49.520Z","dependency_job_id":null,"html_url":"https://github.com/shlomiassaf/ngx-modialog","commit_stats":null,"previous_names":["shlomiassaf/angular2-modal"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/shlomiassaf/ngx-modialog","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngx-modialog","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngx-modialog/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngx-modialog/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngx-modialog/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shlomiassaf","download_url":"https://codeload.github.com/shlomiassaf/ngx-modialog/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shlomiassaf%2Fngx-modialog/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262850013,"owners_count":23374321,"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"],"created_at":"2024-07-31T16:01:23.618Z","updated_at":"2025-07-03T00:07:51.508Z","avatar_url":"https://github.com/shlomiassaf.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","UI Components"],"sub_categories":["Overlay"],"readme":"# ngx-modialog (previously `angular2-modal`)\n\n\n---\n\n**This project is looking for a new maintainer, see [#414](https://github.com/shlomiassaf/ngx-modialog/issues/414) for details.**\n\n---\n\n### ngx-modialog version 5.x.x works with angular 5.x.x\n\n# IMPORTANT - V4 BREAKING CHANGE:\nVersion 4.x.x contains some breaking changes, please see the [CHANGELOG](./CHANGELOG.md)\n\n## Library has been renamed from version 3.0.2\n\n\nModal / Dialog implementation for angular.\n\n  - Easy to use API via Fluent API Presets (alert, prompt, confirm)\n  - Can render Component's, TemplateRef's and literal string\n  - Extendable via plugins.\n  - Easy to use\n```typescript\nmodal.alert()\n    .title('Hello World')\n    .body('In Angular')\n    .open();\n```\n\n\nAvailable plugins: \n\n  - Bootstrap (3 \u0026 4)\n  - [Vex 3 \u0026 4](http://github.hubspot.com/vex/docs/welcome/)\n\n## Install\n```bash\nnpm install ngx-modialog\n```\n\n## Basic plunker playground (bootstrap plugin):\n\n##### ngx-modialog @ 4.x.x\nhttp://plnkr.co/edit/lV7zsw7Yqossgs9JOfQU?p=preview\n\n##### ngx-modialog @ 3.x.x\nhttp://plnkr.co/edit/2ppVYl517GI1Byv8vVbG?p=preview\n\n## Quick start\n\n**In your application root module definition add `ModalModule` and the plugin you want to use:**\n\nWe will use the bootstrap plugin (`BootstrapModalModule`) for this introduction.\n\n```typescript\nimport { ModalModule } from 'ngx-modialog';\nimport { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';\n\n// lots of code...\n\n@NgModule({\n  bootstrap: [ /* ... */ ],\n  declarations: [ /* ... */ ],\n  imports: [\n    /* ... */\n    ModalModule.forRoot(),\n    BootstrapModalModule\n  ],\n})\nexport class AppModule { /* lots of code... */ }\n```\n\n**In any angular component or service inject the `Modal` service and open a modal**:\n\n\n```typescript\nimport { Component, ViewContainerRef } from '@angular/core';\nimport { Overlay } from 'ngx-modialog';\nimport { Modal } from 'ngx-modialog/plugins/bootstrap';\n\n@Component({\n  selector: 'my-app',\n  template: `\u003cbutton (click)=\"onClick()\"\u003eAlert\u003c/button\u003e`\n})\nexport class AppComponent {\n  constructor(public modal: Modal) { }\n\n  onClick() {\n    const dialogRef = this.modal.alert()\n        .size('lg')\n        .showClose(true)\n        .title('A simple Alert style modal window')\n        .body(`\n            \u003ch4\u003eAlert is a classic (title/body/footer) 1 button modal window that \n            does not block.\u003c/h4\u003e\n            \u003cb\u003eConfiguration:\u003c/b\u003e\n            \u003cul\u003e\n                \u003cli\u003eNon blocking (click anywhere outside to dismiss)\u003c/li\u003e\n                \u003cli\u003eSize large\u003c/li\u003e\n                \u003cli\u003eDismissed with default keyboard key (ESC)\u003c/li\u003e\n                \u003cli\u003eClose wth button click\u003c/li\u003e\n                \u003cli\u003eHTML content\u003c/li\u003e\n            \u003c/ul\u003e`)\n        .open();\n\n    dialogRef.result\n        .then( result =\u003e alert(`The result is: ${result}`) );\n  }\n}\n```\n\nIf you are using **ngx-modialog** version 3.X.X or below, `open()` returned a promise so replace the last 2 lines with:\n```typescript\n   dialogRef\n       .then( dialogRef =\u003e {\n           dialogRef.result.then( result =\u003e alert(`The result is: ${result}`);\n       });\n```\n\nWe are using the `alert()` method, one of 3 (prompt, confirm)) fluent-api methods we call `drop-ins`\n\nWe then use the `result` property to wait for the modal closing event.\n\n**Notes:**\n  - Fluent API methods (drop-ins) are pre-configured (presets) methods that allow easy configuration and execution, you can create custom presets - see the demo application.\n  - For more control use the `open()` method, which is used by all drop in's internally.\n  - We import the `Modal` service from the plugin and not from the root library.\n  Import from the root should work but being explicit allow using multiple plugins.\n\n## Demo App\nThe Demo application is a full implementation of the library with the native plugins.\n\nView it at [shlomiassaf.github.io/ngx-modialog](http://shlomiassaf.github.io/ngx-modialog/)\n\nThe demo application is [part of this repository](https://github.com/shlomiassaf/ngx-modialog/tree/master/src/demo/app) and it is a great place to learn by example.\n\n#### Bootstrap / VEX features:\n  - Customizable with components, Presets and more...  \n  - Select cancel/quit key.\n  - Cascading modals.  \n  - Element blocking.  \n  - Blocking / Non blocking modal.  \n  - Modal as a component, replace the content by supplying a custom component.   \n\nThe demo application comes with a [dynamic modal generator](http://shlomiassaf.github.io/ngx-modialog#/bootstrap-demo/customizeModals) for the **Boostrap** plugin\n\n## Plugins\nPlugins serve as a concrete UI implementation for a modal.\n\nIt can be an implementation for a known library (e.g: bootstrap) or something completely unique\n\nWhile `ngx-modialog` has some built in plugins it is also possible to use external plugins from NPM, if someone decide to build one.\n\n\u003e Built a plugin? I would love to know :)\n\n# Known bugs\n### The dialog closes when removing the target DOM element in a click event\nref [issue#111](https://github.com/shlomiassaf/ngx-modialog/issues/111)\n\nTo avoid this problem use `event.stopPropagation();` or put the element removal inside a `setTimeout` call\n\n---\n\n# HELP WANTED!\n\nAs a sole author I find it difficult to maintain multiple open source projects.\nAs a result it is hard for me to replay rapidly to requests/help/etc...\n\nIf you would like to contribute, please contact me, the community will thank you.\n\nYou can contribute via:\n\n  - Implementing features \u0026 Bug fixes\n  - Documentation (Extremely important)\n  - Issue management\n\nThank you!\n\nShlomi.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlomiassaf%2Fngx-modialog","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshlomiassaf%2Fngx-modialog","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshlomiassaf%2Fngx-modialog/lists"}