{"id":13480713,"url":"https://github.com/dougludlow/ng2-bs3-modal","last_synced_at":"2025-10-01T23:30:39.845Z","repository":{"id":57742091,"uuid":"51090468","full_name":"dougludlow/ng2-bs3-modal","owner":"dougludlow","description":"Angular Bootstrap 3 Modal Component","archived":true,"fork":false,"pushed_at":"2020-09-07T13:02:28.000Z","size":1097,"stargazers_count":261,"open_issues_count":41,"forks_count":133,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-11-15T04:55:01.925Z","etag":null,"topics":["angular","angular-component","angular2","modal","ng2-bs3-modal"],"latest_commit_sha":null,"homepage":"http://dougludlow.github.io/ng2-bs3-modal/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dougludlow.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-02-04T16:53:51.000Z","updated_at":"2024-05-20T03:25:57.000Z","dependencies_parsed_at":"2022-09-06T04:02:37.657Z","dependency_job_id":null,"html_url":"https://github.com/dougludlow/ng2-bs3-modal","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dougludlow%2Fng2-bs3-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dougludlow%2Fng2-bs3-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dougludlow%2Fng2-bs3-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dougludlow%2Fng2-bs3-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dougludlow","download_url":"https://codeload.github.com/dougludlow/ng2-bs3-modal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234909086,"owners_count":18905504,"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","angular-component","angular2","modal","ng2-bs3-modal"],"created_at":"2024-07-31T17:00:44.060Z","updated_at":"2025-10-01T23:30:39.444Z","avatar_url":"https://github.com/dougludlow.png","language":"TypeScript","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)","UI Components"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Overlay"],"readme":"# ng2-bs3-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)\nAngular (2+) Bootstrap 3 Modal Component\n\n## Demo\nhttp://dougludlow.github.io/ng2-bs3-modal/\n\n## Dependencies\n\n`ng2-bs3-modal` depends on `bootstrap` which depends on `jquery`. You'll need to include both scripts before `ng2-bs3-modal` or somehow make them available globally, depending on your build system. Example:\n\n```bash\nnpm install jquery bootstrap@^3.3.7\n```\n\n**`./jquery.ts`**\n```typescript\nimport * as $ from 'jquery';\nwindow['jQuery'] = window['$'] = $;\n```\n\n**`./main.ts`**\n```typescript\nimport './jquery';\nimport 'bootstrap/js/modal'; // or just 'bootstrap'\nimport 'bootstrap/dist/css/bootstrap.css'; // optional\n```\n\n## Install\n\nnpm\n```bash\nnpm install --save ng2-bs3-modal\n```\n\nyarn\n```bash\nyarn add ng2-bs3-modal\n```\n\nThen include the module in the `imports` collection of your app's module:\n\n```typescript\nimport { NgModule } from '@angular/core';\nimport { BsModalModule } from 'ng2-bs3-modal';\n\n@NgModule({\n    imports: [ BsModalModule ]\n    ...\n})\nexport class MyAppModule { }\n```\n\n## API\n\n### BsModalComponent\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- `cssClass: string`, default: `undefined`\n\n   Applies the given class to the modal. Can be used to styles the modal; for example, giving it a custom size.\n\n#### Outputs\n\n- `onShow: EventEmitter\u003cEvent\u003e`\n\n   Emits when the `show.bs.modal` event is triggered, just before the modal is shown. Call `Event.preventDefault()` to cancel the modal from showing.\n\n- `onHide: EventEmitter\u003cBsModalHideEvent\u003e`\n\n   Emits when the `hide.bs.modal` event is triggered, just before the modal is hidden. Call `BsModalHideEvent.event.preventDefault()` to cancel the modal from hiding.\n\n- `onClose: EventEmitter\u003cany\u003e`\n\n   Emits when `ModalComponent.close()` is called. Will emit whatever was passed into `ModalComponent.close()`.\n\n- `onDismiss: EventEmitter\u003cBsModalHideType\u003e`\n    \n   Emits when `ModalComponent.dismiss()` is called, or when the modal is dismissed with the keyboard or backdrop. Returns a `BsModalHideType` that can be used to determine how the modal was dismissed.\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(value?: any): Promise\u003cany\u003e`\n\n   Closes the modal. Causes `onClose` to be emitted. Returns a promise that resolves the value passed to `close` 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### BsModalHeaderComponent\n\n#### Inputs\n\n- `showDismiss: boolean`, default: `false`\n\n   Show or hide the close button in the header. Specify `true` to show.\n   \n### BsModalFooterComponent\n\n#### Inputs\n\n- `showDefaultButtons: boolean`, default: `false`\n\n   Show or hide the default 'Close' and 'Dismiss' buttons in the footer. Specify `true` to show.\n\n- `closeButtonLabel: string`, default: `'Close'`\n\n   Change the label in the default 'Close' button in the footer. Has no effect if showDefaultButtons aren't set.\n\n- `dismissButtonLabel: string`, default: `'Dismiss'`\n\n   Change the label in the default 'Dismiss' button in the footer. Has no effect if showDefaultButtons aren't set.\n\n### BsModalService\n\n#### Methods\n\n- `dismissAll(): void`\n   \n   Dismiss all open modals. Inject the `BsModalService` into a componet/service to use.\n\n## Example Usage\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\u003cbs-modal #modal\u003e\n    \u003cbs-modal-header [showDismiss]=\"true\"\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/bs-modal-header\u003e\n    \u003cbs-modal-body\u003e\n        Hello World!\n    \u003c/bs-modal-body\u003e\n    \u003cbs-modal-footer [showDefaultButtons]=\"true\"\u003e\u003c/bs-modal-footer\u003e\n\u003c/bs-modal\u003e\n```\n    \n![Example](src/assets/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\u003cbs-modal #modal [keyboard]=\"false\" [backdrop]=\"'static'\"\u003e\n    \u003cbs-modal-header [showDismiss]=\"false\"\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/bs-modal-header\u003e\n    \u003cbs-modal-body\u003e\n        Hello World!\n    \u003c/bs-modal-body\u003e\n    \u003cbs-modal-footer [showDefaultButtons]=\"true\"\u003e\u003c/bs-modal-footer\u003e\n\u003c/bs-modal\u003e\n```\n    \n### Use custom buttons in footer\n\n```html    \n\u003cbs-modal #modal\u003e\n    \u003cbs-modal-header\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/bs-modal-header\u003e\n    \u003cbs-modal-body\u003e\n        Hello World!\n    \u003c/bs-modal-body\u003e\n    \u003cbs-modal-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/bs-modal-footer\u003e\n\u003c/bs-modal\u003e\n```\n    \n![Example](src/assets/modal-custom-footer.png)\n    \n### Opening and closing the modal from a parent component\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { BsModalComponent } from 'ng2-bs3-modal';\n\n@Component({\n    selector: 'parent-component',\n    template: `\n        \u003cbs-modal #myModal\u003e\n            ...\n        \u003c/bs-modal\u003e\n    `\n})\nexport class ParentComponent {\n    @ViewChild('myModal')\n    modal: BsModalComponent;\n\n    close() {\n        this.modal.close();\n    }\n    \n    open() {\n        this.modal.open();\n    }\n}\n```\n\n### Opening the modal when the parent component loads\n\n```typescript\nimport { Component, ViewChild, AfterViewInit } from '@angular/core';\nimport { BsModalComponent } from 'ng2-bs3-modal';\n\n@Component({\n    selector: 'parent-component',\n    template: `\n        \u003cbs-modal #myModal\u003e\n            ...\n        \u003c/bs-modal\u003e\n    `\n})\nexport class ParentComponent implements AfterViewInit {\n    @ViewChild('myModal')\n    modal: BsModalComponent;\n\n    ngAfterViewInit() {\n        this.modal.open();\n    }\n}\n```\n\nNote: `ViewChild` doesn't resolve the `modal` property until `AfterViewInit`. `OnInit` is too early and will result in an \"undefined\" error.\n\n### Multiple modals in a component\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { BsModalComponent } from 'ng2-bs3-modal';\n\n@Component({\n    selector: 'parent-component',\n    template: `\n        \u003cbs-modal #myFirstModal\u003e\n            ...\n        \u003c/bs-modal\u003e\n        \u003cbs-modal #mySecondModal\u003e\n            ...\n        \u003c/bs-modal\u003e\n    `\n})\nexport class ParentComponent {\n    @ViewChild('myFirstModal')\n    modal1: BsModalComponent;\n    \n    @ViewChild('mySecondModal')\n    modal2: BsModalComponent;\n    \n    ...\n}\n```\n\n### Modal with a custom size\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { BsModalComponent } from 'ng2-bs3-modal';\n\n@Component({\n    selector: 'parent-component',\n    styles: ['\u003e\u003e\u003e .modal-xl { width: 1100px; }'],\n    template: `\n        \u003cbs-modal cssClass=\"modal-xl\" #modal\u003e\n            ...\n        \u003c/bs-modal\u003e\n    `\n})\nexport class ParentComponent {\n    ...\n}\n```\n\nNote: Angular2 emulates the shadow dom by prefixing component styles with a unique identifier. Because the modal is attached to the body tag, it doesn't pick up these styles. You will need to add the `/deep/` or `\u003e\u003e\u003e` selector in order for the style to take effect. See [Component Styles](https://angular.io/docs/ts/latest/guide/component-styles.html#!#-deep-).\n\n### Modal in NgFor\n\n```typescript\nimport { Component, ViewChildren } from '@angular/core';\nimport { BsModalComponent } from 'ng2-bs3-modal';\n\n@Component({\n    selector: 'parent-component',\n    template: `\n        \u003cbutton type=\"button\" class=\"btn btn-default\" (click)=\"modal.open()\"\u003eOpen me!\u003c/button\u003e\n        \u003cdiv *ngFor=\"let item in items; trackBy: item.id\"\u003e\n            \u003cbs-modal #modal\u003e\n                ...\n            \u003c/bs-modal\u003e\n        \u003c/div\u003e\n    `\n})\nexport class ParentComponent {\n    @ViewChildren(BsModalComponent)\n    modals: QueryList\u003cBsModalComponent\u003e; // How to access a collection of modals\n    ...\n}\n```\n\nNote: If you are updating items asynchronously, make sure you are using `trackBy` in the `ngFor` directive so that Angular doesn't teardown and redraw the elements each time the collection is changed. See [NgFor Directive](https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html) for more details.\n\n### Modal with validation\n\n```html\n\u003cbs-modal #validationModal\u003e\n    \u003cform #modalForm=\"ngForm\"\u003e\n        \u003cbs-modal-header [showDismiss]=\"true\"\u003e\n            \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n        \u003c/bs-modal-header\u003e\n        \u003cbs-modal-body\u003e\n            \u003cdiv class=\"form-group\"\u003e\n                \u003clabel for=\"firstName\"\u003eFirst Name\u003c/label\u003e\n                \u003cinput type=\"text\" class=\"form-control\" required [(ngModel)]=\"firstName\" name=\"firstName\" id=\"firstName\"\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"form-group\"\u003e\n                \u003clabel for=\"lastName\"\u003eLast Name\u003c/label\u003e\n                \u003cinput type=\"text\" class=\"form-control\" required [(ngModel)]=\"lastName\" name=\"lastName\" id=\"lastName\"\u003e\n            \u003c/div\u003e\n        \u003c/bs-modal-body\u003e\n        \u003cbs-modal-footer\u003e\n            \u003cbutton type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\" (click)=\"validationModal.dismiss()\"\u003eCancel\u003c/button\u003e\n            \u003cbutton type=\"button\" class=\"btn btn-primary\" [disabled]=\"!modalForm.valid\" (click)=\"validationModal.close()\"\u003eSave\u003c/button\u003e\n        \u003c/bs-modal-footer\u003e\n    \u003c/form\u003e\n\u003c/bs-modal\u003e\n```\n\n### Autofocus on a textbox when modal is opened\n\n```html    \n\u003cbs-modal #modal\u003e\n    \u003cbs-modal-header\u003e\n        \u003ch4 class=\"modal-title\"\u003eI'm a modal!\u003c/h4\u003e\n    \u003c/bs-modal-header\u003e\n    \u003cbs-modal-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/bs-modal-body\u003e\n    \u003cbs-modal-footer [showDefaultButtons]=\"true\"\u003e\u003c/bs-modal-footer\u003e\n\u003c/bs-modal\u003e\n```\n\n## Building\n\n```bash\ngit clone https://github.com/dougludlow/ng2-bs3-modal.git\nyarn\nyarn build\n```\n\n## Running \n\n```bash\nyarn start\n```\n\nNavigate to http://localhost:4200/ in your browser.\n\n## Testing\n\n```bash\nyarn test:lib\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%2Fdougludlow%2Fng2-bs3-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdougludlow%2Fng2-bs3-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougludlow%2Fng2-bs3-modal/lists"}