Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/herbis/ngx-bootstrap-feedback
Module that provides a modal popup (powered by bootstrap) for collecting user feedback.
https://github.com/herbis/ngx-bootstrap-feedback
angular bootstrap feedback modal screenshot
Last synced: about 1 month ago
JSON representation
Module that provides a modal popup (powered by bootstrap) for collecting user feedback.
- Host: GitHub
- URL: https://github.com/herbis/ngx-bootstrap-feedback
- Owner: Herbis
- License: mit
- Created: 2017-06-07T12:08:37.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-14T14:57:22.000Z (about 7 years ago)
- Last Synced: 2024-09-27T15:21:53.807Z (about 2 months ago)
- Topics: angular, bootstrap, feedback, modal, screenshot
- Language: TypeScript
- Homepage:
- Size: 30.3 KB
- Stars: 5
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ngx-bootstrap-feedback
[](https://www.npmjs.com/package/ngx-bootstrap-feedback)
## Overview
This module provides a modal popup *(powered by bootstrap)* for collecting user feedback.
*Heavily inspired by [angular-bootstrap-feedback](https://github.com/RobertYoung/angular-bootstrap-feedback).*
## Installation and Usage
##### Install using NPM
```npm install ngx-bootstrap-feedback --save```
##### Import Feedback module in the required module (usually app root module).
```
import {FeedbackModule} from "ngx-bootstrap-feedback/feedback.module";
import {ModalModule} from "@herbis/ngx-modal";
@NgModule({
...
imports: [
...
FeedbackModule,
ModalModule,
...
],
...
})
...
```
See [below](#configuration-options) for available configuration options.
##### Initialize feedback configuration
```
...
this.feedbackConfiguration = {
onCancel: () => this.clearFeedbackFields(),
onSubmit: (feedback: FeedbackModel) => this.onSubmitFeedback(feedback),
screenshotOnlyHighlighted: true
};
...
```
##### Add selectors to your component template (usually root) and bind configuration to them.
```
...
...
...
...
```
###### Example:
```
Subject
Description:
Contact
```
## Configuration
### Configuration Options
#### Event callbacks
|Event|Description|Emits|
|:--------|:-------------|------:|
|onCancel|Fired when the feedback is canceled from the modal.|-|
|onCancelScreenshot|Fired when canceling from the screenshot mode.|-|
|onEnterTakeScreenshot|Fired when entering screenshot mode.|-|
|onHighlightDrawn|Fired when a highlight is drawn in the screenshot mode.|highlight: HTMLDivElement|
|onOpen|Fired when the feedback modal is opened.|-|
|onScreenshotTaken|Fired when a screenshot is taken by the user.|screenshot: string (base64 data url)|
|onSubmit|Fired when the user submits feedback from the modal if onSubmitValidation is successful or not defined.|feedbackSubmission: FeedbackModel|
|onSubmitValidation|Fired when the user submits feedback but before onSubmit. Expects boolean as return value. onSubmit will not be called if validation fails.|feedbackSubmission: FeedbackModel|
|onTakeScreenshot|Fired when the user presses button to take a screenshot but before it is actually taken. This can be used to cleanup view to make sure something is included / excluded from the screenshot.|-|