{"id":13480753,"url":"https://github.com/mattlewis92/angular-confirmation-popover","last_synced_at":"2025-04-06T14:10:19.320Z","repository":{"id":54596131,"uuid":"57882334","full_name":"mattlewis92/angular-confirmation-popover","owner":"mattlewis92","description":"An angular 15.0+ bootstrap confirmation popover","archived":false,"fork":false,"pushed_at":"2024-02-28T17:57:14.000Z","size":28492,"stargazers_count":202,"open_issues_count":0,"forks_count":59,"subscribers_count":16,"default_branch":"main","last_synced_at":"2024-10-29T23:10:20.532Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://mattlewis92.github.io/angular-confirmation-popover/","language":"TypeScript","has_issues":false,"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/mattlewis92.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"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},"funding":{"github":"mattlewis92","patreon":"mattlewis92","custom":"https://www.paypal.me/mattlewis92"}},"created_at":"2016-05-02T10:31:48.000Z","updated_at":"2024-07-04T23:49:25.000Z","dependencies_parsed_at":"2024-01-11T00:02:55.737Z","dependency_job_id":"6fd35700-aa46-4e67-8a9e-4f6a6bbb2c4c","html_url":"https://github.com/mattlewis92/angular-confirmation-popover","commit_stats":{"total_commits":445,"total_committers":9,"mean_commits":49.44444444444444,"dds":"0.16629213483146066","last_synced_commit":"5377fbf37963c570ff2dc83c598defa9a642a052"},"previous_names":["mattlewis92/angular2-bootstrap-confirm"],"tags_count":54,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-confirmation-popover","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-confirmation-popover/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-confirmation-popover/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mattlewis92%2Fangular-confirmation-popover/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mattlewis92","download_url":"https://codeload.github.com/mattlewis92/angular-confirmation-popover/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247492513,"owners_count":20947544,"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-07-31T17:00:44.608Z","updated_at":"2025-04-06T14:10:19.297Z","avatar_url":"https://github.com/mattlewis92.png","language":"TypeScript","funding_links":["https://github.com/sponsors/mattlewis92","https://patreon.com/mattlewis92","https://www.paypal.me/mattlewis92"],"categories":["Uncategorized","Table of contents","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","Third Party Components","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Overlay"],"readme":"# Angular confirmation popover\n\n[![Sponsorship](https://img.shields.io/badge/funding-github-%23EA4AAA)](https://github.com/users/mattlewis92/sponsorship)\n[![CI](https://github.com/mattlewis92/angular-confirmation-popover/actions/workflows/ci.yml/badge.svg)](https://github.com/mattlewis92/angular-confirmation-popover/actions/workflows/ci.yml)\n[![codecov](https://codecov.io/gh/mattlewis92/angular-confirmation-popover/branch/main/graph/badge.svg)](https://codecov.io/gh/mattlewis92/angular-confirmation-popover)\n[![npm version](https://badge.fury.io/js/angular-confirmation-popover.svg)](http://badge.fury.io/js/angular-confirmation-popover)\n[![Twitter Follow](https://img.shields.io/twitter/follow/mattlewis92_.svg)](https://twitter.com/mattlewis92_)\n\n## Demo\n\nhttps://mattlewis92.github.io/angular-confirmation-popover/\n\n## Table of contents\n\n- [About](#about)\n- [Installation](#installation)\n- [Documentation](#documentation)\n- [Development](#development)\n- [License](#licence)\n\n## About\n\nA simple angular 15.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.\n\n[AngularJS 1.x version](https://github.com/mattlewis92/angular-bootstrap-confirm)\n\n## Installation\n\n1. Install through npm:\n\n```\nnpm install angular-confirmation-popover\n```\n\n2. Install bootstrap (both v3 and v4 are supported). If not using bootstrap you could implement the popover styles yourself.\n\n3. Add the NgModule:\n\n```typescript\nimport { NgModule, Component } from '@angular/core';\nimport { ConfirmationPopoverModule } from 'angular-confirmation-popover';\n\n@NgModule({\n  declarations: [MyComponent],\n  imports: [\n    ConfirmationPopoverModule.forRoot({\n      confirmButtonType: 'danger', // set defaults here\n    }),\n  ],\n  bootstrap: [MyComponent],\n})\nclass MyModule {}\n```\n\n4. Now use it within your component\n\n```typescript\n@Component({\n  selector: 'my-component',\n  template: ` \u003cbutton class=\"btn btn-outline-secondary\" mwlConfirmationPopover [popoverTitle]=\"popoverTitle\" [popoverMessage]=\"popoverMessage\" placement=\"left\" (confirm)=\"confirmClicked = true\" (cancel)=\"cancelClicked = true\"\u003eClick me!\u003c/button\u003e `,\n})\nclass MyComponent {\n  popoverTitle = 'Popover title';\n  popoverMessage = 'Popover description';\n  confirmClicked = false;\n  cancelClicked = false;\n}\n```\n\nYou may also find it useful to view the [demo source](https://github.com/mattlewis92/angular-confirmation-popover/blob/main/projects/demo/app).\n\n## Documentation\n\nAll documentation is auto-generated from the source via compodoc and can be viewed here:\nhttps://mattlewis92.github.io/angular-confirmation-popover/docs/\n\nThe main `mwlConfirmationPopover` directive options can be viewed [here](https://mattlewis92.github.io/angular-confirmation-popover/docs/directives/ConfirmationPopoverDirective.html).\n\n## Development\n\n### Prepare your environment\n\n- Install [Node.js](http://nodejs.org/)\n- Install pnpm: `corepack enable`\n- Install local dev dependencies: `pnpm install` while current directory is this repo\n\n### Development server\n\nRun `pnpm start` to start a development server on port 8000 with auto reload + tests.\n\n### Testing\n\nRun `pnpm test` to run tests once or `pnpm test:watch` to continually run tests.\n\n### Release\n\n```bash\npnpm release\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattlewis92%2Fangular-confirmation-popover","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmattlewis92%2Fangular-confirmation-popover","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmattlewis92%2Fangular-confirmation-popover/lists"}