An angular directive for sending feedback featuring Angular 6, Html2canvas, Angular Material, Rxjs, inspired by Google send feedback, based on angular-cli.
make sure your project:
- is an angular(version >= 6.0.0) project
- has set up angular material
download it from npm
npm install ng-feedback --saveuse the feedback module in your project, at any module, you just need to imports into your module:
import { FeedbackModule } from 'ng-feedback'easy to use the directive, just add it in a html tag, such as:
<button feedback>feedback</button> | Name | Default Value |
|---|---|
title | Send feedback |
placeholder | Describe your issue or share your ideas |
editTip | Click to highlight or hide info |
checkboxLabel | Include screenshot |
cancelLabel | CANCEL |
sendLabel | SEND |
moveToolbarTip | move toolbar |
drawRectTip | Draw using yellow to highlight issues or black to hide sensitive info |
highlightTip | highlight issues |
hideTip | hide sensitive info |
editDoneLabel | DONE |
send(feedback) it is an output of the directive, the usage is:
<button feedback (send)="onSend($event)">feedback </button> Then you can custom the onSend method in your component. The param feedback is an object contains two properties: description and screenshot.
- description is string to describe issues or ideas
- screenshot comes from HTMLCanvasElement.toDataURL('image/png'), can be used as src of an img tag.
Make sure you have Node version >= 8.0 and NPM >= 5
Clone/Download the repo then edit feedback library inside
/src/app/feedback
# clone repo git clone https://github.com/RickonChen/feedback.git # change directory to our repo cd feedback # install the repo with npm npm install # start the server npm start # if you're in China use cnpm # https://github.com/cnpm/cnpmgo to http://127.0.0.1:4200 or http://localhost:4200 in your browser