{"id":27450191,"url":"https://github.com/ankosoftware/ng2-bootstrap-modal","last_synced_at":"2025-09-04T09:40:28.971Z","repository":{"id":57306643,"uuid":"79788972","full_name":"ankosoftware/ng2-bootstrap-modal","owner":"ankosoftware","description":"Library to simplify the work with bootstrap modal dialogs","archived":false,"fork":false,"pushed_at":"2023-02-07T17:16:18.000Z","size":82,"stargazers_count":54,"open_issues_count":49,"forks_count":62,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-07T03:49:51.361Z","etag":null,"topics":["angular2","bootstrap","dialog","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/ankosoftware.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":"2017-01-23T09:20:08.000Z","updated_at":"2023-10-25T12:09:52.000Z","dependencies_parsed_at":"2023-02-19T20:15:39.727Z","dependency_job_id":null,"html_url":"https://github.com/ankosoftware/ng2-bootstrap-modal","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ankosoftware/ng2-bootstrap-modal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankosoftware%2Fng2-bootstrap-modal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankosoftware%2Fng2-bootstrap-modal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankosoftware%2Fng2-bootstrap-modal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankosoftware%2Fng2-bootstrap-modal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ankosoftware","download_url":"https://codeload.github.com/ankosoftware/ng2-bootstrap-modal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ankosoftware%2Fng2-bootstrap-modal/sbom","scorecard":{"id":197319,"data":{"date":"2025-08-11","repo":{"name":"github.com/ankosoftware/ng2-bootstrap-modal","commit":"c3bf70d1ed7ba9a0178d6ae2aac5770af2fa0606"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":1,"reason":"Found 4/25 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 9 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-16T22:04:03.668Z","repository_id":57306643,"created_at":"2025-08-16T22:04:03.669Z","updated_at":"2025-08-16T22:04:03.669Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273518784,"owners_count":25120037,"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","status":"online","status_checked_at":"2025-09-03T02:00:09.631Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular2","bootstrap","dialog","modal"],"created_at":"2025-04-15T09:14:40.564Z","updated_at":"2025-09-04T09:40:28.897Z","avatar_url":"https://github.com/ankosoftware.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular2 Bootstrap Modal Service\n\nIt is a library to make usage of bootstrap modal plugin easier in Angular2. \nCreate clear and reusable modal components.\nIt makes managing dialogs painless and clearer. \n\nLibrary does not use bootstrap js, only css.\n\nCompatible with bootstrap 3 and bootstrap 4.\n\n## Installation\n\n```npm\nnpm install ng2-bootstrap-modal\n```\nSee [Live Demo](https://plnkr.co/edit/MB6NnzfhicMyAiMJy6YM?p=preview) \n\n### Without bootstrap?\n\nYes, you can create your own CSS. Just write css for .modal and .modal-dialog classes.\n\n```css\n.modal {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: 1050;\n    overflow: hidden;\n    -webkit-overflow-scrolling: touch;\n    outline: 0;\n}\n\n.fade {\n    opacity: 0;\n    -webkit-transition: opacity .15s linear;\n    -o-transition: opacity .15s linear;\n    transition: opacity .15s linear;\n}\n\n.fade.in {\n    opacity: 1;\n}\n\n.modal-dialog {\n    position: relative;\n    width: auto;\n    margin: 10px;\n}\n\n.modal.in .modal-dialog {\n    -webkit-transform: translate(0,0);\n    -ms-transform: translate(0,0);\n    -o-transform: translate(0,0);\n    transform: translate(0,0);\n}\n\n.modal.fade .modal-dialog {\n    -webkit-transition: -webkit-transform .3s ease-out;\n    -o-transition: -o-transform .3s ease-out;\n    transition: transform .3s ease-out;\n    -webkit-transform: translate(0,-25%);\n    -ms-transform: translate(0,-25%);\n    -o-transform: translate(0,-25%);\n    transform: translate(0,-25%);\n}\n\n@media (min-width: 768px) {\n    .modal-dialog {\n        width: 600px;\n        margin: 30px auto;\n    }\n}\n```\n\n## Quickstart\n\n### Step 1. add bootstrap CSS  \nYou can add bootstrap CSS from CDN\n```html\n\u003c!-- Bootstrap 3.x --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u\" crossorigin=\"anonymous\"\u003e\n```\nor \n```html\n\u003c!-- Bootstrap 4.x --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css\" integrity=\"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ\" crossorigin=\"anonymous\"\u003e\n```\n\n### Step 2. import '**BootstrapModalModule**' module\n\napp.module.ts:\n```typescript\nimport { NgModule} from '@angular/core';\nimport { CommonModule } from \"@angular/common\";\nimport { BrowserModule } from '@angular/platform-browser';\nimport { BootstrapModalModule } from 'ng2-bootstrap-modal';\nimport { AppComponent } from './app.component';\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    CommonModule,\n    BrowserModule,\n    BootstrapModalModule\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {}\n```\nBy default, dialog placeholder will be added to AppComponent.\nBut you can select custom placeholder (i.e. document body):\n```typescript\nimports: [\n    ...\n    BootstrapModalModule.forRoot({container:document.body})\n  ]\n```\n\n### Step 3. Create your modal dialog component \n\nYour modal dialog is expected to be extended from **DialogComponent**.\n**DialogService** is generic class with two arguments:\n1) input dialog data type (data to initialize component);\n2) dialog result type;\n\nTherefore **DialogService** is supposed to be a constructor argument of **DialogComponent**.\n\nconfirm.component.ts:\n```typescript\nimport { Component } from '@angular/core';\nimport { DialogComponent, DialogService } from \"ng2-bootstrap-modal\";\nexport interface ConfirmModel {\n  title:string;\n  message:string;\n}\n@Component({  \n    selector: 'confirm',\n    template: `\u003cdiv class=\"modal-dialog\"\u003e\n                \u003cdiv class=\"modal-content\"\u003e\n                   \u003cdiv class=\"modal-header\"\u003e\n                     \u003cbutton type=\"button\" class=\"close\" (click)=\"close()\" \u003e\u0026times;\u003c/button\u003e\n                     \u003ch4 class=\"modal-title\"\u003e{{title || 'Confirm'}}\u003c/h4\u003e\n                   \u003c/div\u003e\n                   \u003cdiv class=\"modal-body\"\u003e\n                     \u003cp\u003e{{message || 'Are you sure?'}}\u003c/p\u003e\n                   \u003c/div\u003e\n                   \u003cdiv class=\"modal-footer\"\u003e\n                     \u003cbutton type=\"button\" class=\"btn btn-primary\" (click)=\"confirm()\"\u003eOK\u003c/button\u003e\n                     \u003cbutton type=\"button\" class=\"btn btn-default\" (click)=\"close()\" \u003eCancel\u003c/button\u003e\n                   \u003c/div\u003e\n                 \u003c/div\u003e\n              \u003c/div\u003e`\n})\nexport class ConfirmComponent extends DialogComponent\u003cConfirmModel, boolean\u003e implements ConfirmModel {\n  title: string;\n  message: string;\n  constructor(dialogService: DialogService) {\n    super(dialogService);\n  }\n  confirm() {\n    // we set dialog result as true on click on confirm button, \n    // then we can get dialog result from caller code \n    this.result = true;\n    this.close();\n  }\n}\n```\n\n### Step 4. Register created component to module\n\nAdd component to **declarations** and **entryComponents** section, because the component\nwill be created dynamically.\n\napp.module.ts:\n```typescrit\n    import { NgModule} from '@angular/core';\n    import { CommonModule } from \"@angular/common\";\n    import { BrowserModule } from '@angular/platform-browser';\n    import { BootstrapModalModule } from 'ng2-bootstrap-modal';\n    import { ConfirmComponent } from './confirm.component';\n    import { AppComponent } from './app.component';\n    @NgModule({\n      declarations: [\n        AppComponent,\n        ConfirmComponent\n      ],\n      imports: [\n        CommonModule,\n        BrowserModule,\n        BootstrapModalModule\n      ],\n      //Don't forget to add the component to entryComponents section\n      entryComponents: [\n        ConfirmComponent\n      ],\n      bootstrap: [AppComponent]\n    })\n    export class AppModule {}\n```\n\n### Step 5. Usage\n\napp.component.ts\n```typescript\n    import { Component } from '@angular/core';\n    import { ConfirmComponent } from './confirm.component';\n    import { DialogService } from \"ng2-bootstrap-modal\";\n    \n    @Component({\n      selector: 'app',\n      template: `\n        \u003cdiv class=\"container\"\u003e\n          \u003cbutton class=\"btn btn-default\" (click)=showConfirm()\u003eShow confirm\u003c/button\u003e\n        \u003c/div\u003e\n      `\n    })\n    export class AppComponent {\n        constructor(private dialogService:DialogService) {}\n        showConfirm() {\n            let disposable = this.dialogService.addDialog(ConfirmComponent, {\n                title:'Confirm title', \n                message:'Confirm message'})\n                .subscribe((isConfirmed)=\u003e{\n                    //We get dialog result\n                    if(isConfirmed) {\n                        alert('accepted');\n                    }\n                    else {\n                        alert('declined');\n                    }\n                });\n            //We can close dialog calling disposable.unsubscribe();\n            //If dialog was not closed manually close it by timeout\n            setTimeout(()=\u003e{\n                disposable.unsubscribe();\n            },10000);\n        }\n    }\n```\n\n## Documentation\n\n### DialogComponent\n\nSuper class of all modal components.\n\n#### Class Overview\n\n```typescript\n/**\n* Dialog abstract class\n* @template T1 - input dialog data\n* @template T2 - dialog result\n*/\nabstract class DialogComponent\u003cT1, T2\u003e implements T1 {\n    /**\n    * Constructor\n    * @param {DialogService} dialogService - instance of DialogService\n    */\n    constructor(dialogService: DialogService)\n    \n    /**\n    * Dialog result \n    * @type {T2}\n    */\n    protected result:T2\n    \n    /**\n    * Closes dialog\n    */\n    public close:Function\n}\n```\n\n### DialogOptions \n\n```typescript\ninterface DialogOptions {\n  /**\n  * Dialog index (optional) to set order of modals\n  * @type {number}\n  */\n  index?: number;\n \n  /**\n  * Timestamp to close dialog automatically after timeout (in msec)\n  * @type {number}\n  */\n  autoCloseTimeout?: number;\n  \n  /**\n  * Flag to close dialog by click on backdrop (outside dialog)\n  * @type {boolean}\n  */\n  closeByClickingOutside?: boolean;\n  \n  /**\n   * Custom backdrop color\n   * Default backdrop color you can set via css (.modal {backgroundColor:...})\n   * @type {string}\n   */\n  backdropColor?: string;\n}\n```\n\n### DialogService \n\nService to show dialogs\n\n### Class Overview\n\n```typescript\nclass DialogService {\n    /**\n    * Adds dialog\n    * @param {Type\u003cDialogComponent\u003cT1, T2\u003e} component - Modal dialog component\n    * @param {T1?} data - Initialization data for component (optional) to add to component instance and can be used in component code or template \n    * @param {DialogOptions?} Dialog options\n    * @return {Observable\u003cT2\u003e} - returns Observable to get dialog result\n    */\n    public addDialog\u003cT1, T2\u003e(component:Type\u003cDialogComponent\u003cT1, T2\u003e\u003e, data?:T1, options: DialogOptions): Observable\u003cT2\u003e =\u003e {}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankosoftware%2Fng2-bootstrap-modal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fankosoftware%2Fng2-bootstrap-modal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fankosoftware%2Fng2-bootstrap-modal/lists"}