{"id":13535371,"url":"https://github.com/maxfisher05/ng2-bs4-modal","last_synced_at":"2025-04-02T01:30:35.319Z","repository":{"id":65424511,"uuid":"57333297","full_name":"maxfisher05/ng2-bs4-modal","owner":"maxfisher05","description":"Angular2 Bootstrap4 Modal Component","archived":false,"fork":true,"pushed_at":"2018-05-07T21:01:20.000Z","size":268,"stargazers_count":13,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-19T07:17:37.482Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://dougludlow.github.io/ng2-bs3-modal/","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"dougludlow/ng2-bs3-modal","license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maxfisher05.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-04-28T20:57:51.000Z","updated_at":"2018-06-21T10:38:48.000Z","dependencies_parsed_at":"2023-01-23T01:55:12.458Z","dependency_job_id":null,"html_url":"https://github.com/maxfisher05/ng2-bs4-modal","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxfisher05%2Fng2-bs4-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxfisher05%2Fng2-bs4-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxfisher05%2Fng2-bs4-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxfisher05%2Fng2-bs4-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxfisher05","download_url":"https://codeload.github.com/maxfisher05/ng2-bs4-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246738390,"owners_count":20825775,"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":[],"created_at":"2024-08-01T08:00:55.043Z","updated_at":"2025-04-02T01:30:35.029Z","avatar_url":"https://github.com/maxfisher05.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# ng2-bs4-modal [![npm version](https://badge.fury.io/js/ng2-bs3-modal.svg)](http://badge.fury.io/js/ng2-bs3-modal) [![npm downloads](https://img.shields.io/npm/dm/ng2-bs3-modal.svg)](https://npmjs.org/ng2-bs3-modal) [![Build Status](https://travis-ci.org/dougludlow/ng2-bs3-modal.svg?branch=master)](https://travis-ci.org/dougludlow/ng2-bs3-modal)\nAngular2 Bootstrap4 Modal Component\n\n## Demo\nhttp://maxfisher05.github.io/ng2-bs4-modal/\n\n## Dependencies\n\n`ng2-bs4-modal` depends on bootstrap which depends on jquery, you'll need to include both scripts before ng2-bs4-modal:\n\n```html\n\u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js\"\u003e\u003c/script\u003e\n```  \n\nOr, if you're using [SystemJS](https://github.com/systemjs/systemjs), configure it to load them. And import them in your typscript.\n\n## Install\n\n```bash\n\u003e npm install --save ng2-bs4-modal\n```\n    \nInclude a reference to the bundle in your html:\n\n```html\n\u003cscript src=\"node_modules/ng2-bs4-modal/bundles/ng2-bs4-modal.js\"\u003e\u003c/script\u003e\n```\n    \nOr, if you're using [SystemJS](https://github.com/systemjs/systemjs), add a mapping to your System.config:\n\n```javascript\nSystem.config({\n    defaultJSExtensions: true,\n    map: {\n        'ng2-bs4-modal': 'node_modules/ng2-bs4-modal'\n    }\n});\n```\n\nThen import into your application or component's module:\n\n```typescript\nimport {ModalModule} from 'ng2-bs4-modal/ng2-bs4-modal';\n\n@NgModule({\n    imports: [\n        ...\n        ModalModule,\n    ]\n    ...\n})\nexport class AppModule {\n}\n```\n\nSee examples for [npm](https://github.com/dougludlow/ng2-bs3-modal-demo-npm), [SystemJS](https://github.com/dougludlow/ng2-bs3-modal-demo-systemjs), [jspm](https://github.com/dougludlow/ng2-bs3-modal-demo-jspm), and [angular-cli](https://github.com/dougludlow/ng2-bs3-modal/issues/31).\n    \n## API\n\n### ModalComponent\n\n#### Inputs\n\n- `animation: boolean`, default: `true`\n\n   Specify `false` to simply show the modal rather than having it fade in/out of view.\n   \n- `backdrop: string | boolean`, default: `true`\n\n   Specify `'static'` for a backdrop which doesn't close the modal on click or `false` for no backdrop.\n   \n- `keyboard: boolean`, default: `true`\n\n   Closes the modal when escape key is pressed. Specify `false` to disable.\n   \n- `size: string`, default: `undefined`\n\n   Specify `'sm'` for small and `'lg'` for large.\n\n#### Outputs\n\n- `onClose: EventEmitter`\n\n   Emits when `ModalComponent.close()` is called. \n\n- `onDismiss: EventEmitter`\n    \n   Emits when `ModalComponent.dismiss()` is called, or when the modal is dismissed with the keyboard or backdrop. \n\n- `onOpen: EventEmitter`\n    \n   Emits when `ModalComponent.open()` is called.  \n\n#### Methods\n\n- `open(size?: string): Promise`\n\n   Opens the modal. Size is optional. Specify `'sm'` for small and `'lg'` for large to override size. Returns a promise that resolves when the modal is completely shown.\n   \n- `close(): Promise`\n\n   Closes the modal. Causes `onClose` to be emitted. Returns a promise that resolves when the modal is completely hidden.\n\n- `dismiss(): Promise`\n\n   Dismisses the modal. Causes `onDismiss` to be emitted. Returns a promise that resolves when the modal is completely hidden.\n\n### ModalHeaderComponent\n\n#### Inputs\n\n- `show-close: boolean`, default: `false`\n\n   Show or hide the close button in the header. Specify `true` to show.\n   \n### ModalFooterComponent\n\n#### Inputs\n\n- `show-default-buttons: boolean`, default: `false`\n\n   Show or hide the default 'Save' and 'Close' buttons in the header. Specify `true` to show.\n\n## Examples\n\n### Default modal\n\n```html\n\u003cbutton type=\"button\" class=\"btn btn-default\" (click)=\"modal.open()\"\u003eOpen me!\u003c/button\u003e\n\n\u003cmodal #modal\u003e\n    \u003cmodal-header [show-close]=\"true\"\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/modal-header\u003e\n    \u003cmodal-body\u003e\n        Hello World!\n    \u003c/modal-body\u003e\n    \u003cmodal-footer [show-default-buttons]=\"true\"\u003e\u003c/modal-footer\u003e\n\u003c/modal\u003e\n```\n    \n![Example](demo/images/modal.png)\n    \n### Static modal\n\nThis will create a modal that cannot be closed with the escape key or by clicking outside of the modal.\n\n```html\n\u003cmodal #modal [keyboard]=\"false\" [backdrop]=\"'static'\"\u003e\n    \u003cmodal-header [show-close]=\"false\"\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/modal-header\u003e\n    \u003cmodal-body\u003e\n        Hello World!\n    \u003c/modal-body\u003e\n    \u003cmodal-footer [show-default-buttons]=\"true\"\u003e\u003c/modal-footer\u003e\n\u003c/modal\u003e\n```\n    \n### Use custom buttons in footer\n\n```html    \n\u003cmodal #modal\u003e\n    \u003cmodal-header\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/modal-header\u003e\n    \u003cmodal-body\u003e\n        Hello World!\n    \u003c/modal-body\u003e\n    \u003cmodal-footer\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\" (click)=\"modal.dismiss()\"\u003eCancel\u003c/button\u003e\n        \u003cbutton type=\"button\" class=\"btn btn-primary\" (click)=\"modal.close()\"\u003eOk\u003c/button\u003e\n    \u003c/modal-footer\u003e\n\u003c/modal\u003e\n```\n    \n![Example](demo/images/modal-custom-footer.png)\n    \n### Opening and closing the modal from the host/parent component\n\n```typescript\nimport { Component, ViewChild } from 'angular/core';\nimport { ModalComponent } from 'ng2-bs4-modal/ng2-bs4-modal';\n\n@Component({\n    selector: 'parent-component',\n    template: `\n        \u003cmodal #myModal\u003e\n            ...\n        \u003c/modal\u003e\n    `\n})\nexport class ParentComponent {\n    @ViewChild('myModal')\n    modal: ModalComponent;\n\n    close() {\n        this.modal.close();\n    }\n    \n    open() {\n        this.modal.open();\n    }\n}\n```\n\n### Autofocus on a textbox when modal is opened\n\n```html    \n\u003cmodal #modal\u003e\n    \u003cmodal-header\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/modal-header\u003e\n    \u003cmodal-body\u003e\n        \u003cdiv class=\"form-group\"\u003e\n            \u003clabel for=\"textbox\"\u003eI'm a textbox!\u003c/label\u003e\n            \u003cinput autofocus type=\"text\" class=\"form-control\" id=\"textbox\"\u003e\n        \u003c/div\u003e        \n    \u003c/modal-body\u003e\n    \u003cmodal-footer [show-default-buttons]=\"true\"\u003e\u003c/modal-footer\u003e\n\u003c/modal\u003e\n```\n\n## Building\n\n```bash\ngit clone https://github.com/maxfisher05/ng2-bs4-modal.git\nnpm install\nnpm run build\n```\n\n## Testing\n\n```bash\nnpm test\n```\n\nTo tell karma to watch for changes:\n```bash\nnpm run test-watch\n```\n\n## Bugs/Contributions\n\nReport all bugs and feature requests on the [issue tracker](https://github.com/dougludlow/ng2-bs3-modal/issues).\n\nContributions are welcome! Feel free to open a [pull request](https://github.com/dougludlow/ng2-bs3-modal/pulls). \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxfisher05%2Fng2-bs4-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxfisher05%2Fng2-bs4-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxfisher05%2Fng2-bs4-modal/lists"}