Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattlewis92/angular-confirmation-popover
An angular 15.0+ bootstrap confirmation popover
https://github.com/mattlewis92/angular-confirmation-popover
Last synced: about 1 month ago
JSON representation
An angular 15.0+ bootstrap confirmation popover
- Host: GitHub
- URL: https://github.com/mattlewis92/angular-confirmation-popover
- Owner: mattlewis92
- License: mit
- Created: 2016-05-02T10:31:48.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T17:57:14.000Z (10 months ago)
- Last Synced: 2024-10-29T23:10:20.532Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://mattlewis92.github.io/angular-confirmation-popover/
- Size: 27.2 MB
- Stars: 202
- Watchers: 16
- Forks: 59
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!). (Uncategorized / Uncategorized)
- awesome-angular - angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!). (Uncategorized / Uncategorized)
- awesome-angular-components - angular-confirmation-popover - Displays a bootstrap confirmation popover (with no jQuery or bootstrap JS!). (Uncategorized / Uncategorized)
- awesome-angular-components - mattlewis92/angular-confirmation-popover - An angular 5.0+ bootstrap confirmation popover (UI Components / Overlay)
- awesome-angular - angular-confirmation-popover - An angular 15.0+ bootstrap confirmation popover. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-confirmation-popover - An angular 15.0+ bootstrap confirmation popover. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-confirmation-popover - An angular 15.0+ bootstrap confirmation popover. (Table of contents / Third Party Components)
- fucking-awesome-angular - angular-confirmation-popover - An angular 15.0+ bootstrap confirmation popover. (Table of contents / Third Party Components)
README
# Angular confirmation popover
[](https://github.com/users/mattlewis92/sponsorship)
[](https://github.com/mattlewis92/angular-confirmation-popover/actions/workflows/ci.yml)
[](https://codecov.io/gh/mattlewis92/angular-confirmation-popover)
[](http://badge.fury.io/js/angular-confirmation-popover)
[](https://twitter.com/mattlewis92_)
## Demo
https://mattlewis92.github.io/angular-confirmation-popover/
## Table of contents
- [About](#about)
- [Installation](#installation)
- [Documentation](#documentation)
- [Development](#development)
- [License](#licence)
## About
A simple angular 15.0+ directive to display a bootstrap styled confirmation popover when an element is clicked.
[AngularJS 1.x version](https://github.com/mattlewis92/angular-bootstrap-confirm)
## Installation
1. Install through npm:
```
npm install angular-confirmation-popover
```
2. Install bootstrap (both v3 and v4 are supported). If not using bootstrap you could implement the popover styles yourself.
3. Add the NgModule:
```typescript
import { NgModule, Component } from '@angular/core';
import { ConfirmationPopoverModule } from 'angular-confirmation-popover';
@NgModule({
declarations: [MyComponent],
imports: [
ConfirmationPopoverModule.forRoot({
confirmButtonType: 'danger', // set defaults here
}),
],
bootstrap: [MyComponent],
})
class MyModule {}
```
4. Now use it within your component
```typescript
@Component({
selector: 'my-component',
template: ` Click me! `,
})
class MyComponent {
popoverTitle = 'Popover title';
popoverMessage = 'Popover description';
confirmClicked = false;
cancelClicked = false;
}
```
You may also find it useful to view the [demo source](https://github.com/mattlewis92/angular-confirmation-popover/blob/main/projects/demo/app).
## Documentation
All documentation is auto-generated from the source via compodoc and can be viewed here:
https://mattlewis92.github.io/angular-confirmation-popover/docs/
The main `mwlConfirmationPopover` directive options can be viewed [here](https://mattlewis92.github.io/angular-confirmation-popover/docs/directives/ConfirmationPopoverDirective.html).
## Development
### Prepare your environment
- Install [Node.js](http://nodejs.org/)
- Install pnpm: `corepack enable`
- Install local dev dependencies: `pnpm install` while current directory is this repo
### Development server
Run `pnpm start` to start a development server on port 8000 with auto reload + tests.
### Testing
Run `pnpm test` to run tests once or `pnpm test:watch` to continually run tests.
### Release
```bash
pnpm release
```
## License
MIT