An angular directive for sending feedback featuring Angular 6, Html2canvas, Angular Material, Rxjs, inspired by Google send feedback, based on angular-cli.
FORKED FORM https://github.com/RickonChen/feedback because the owner don't maintain this repo.
make sure your project:
- is an angular(version >= 13) project
- has set up angular material
For angular >= 13 see branch stable/1.0
download it from npm
npm install @digikare/ngx-md-feedback --save
use the feedback module in your project, at any module, you just need to imports into your module:
import { FeedbackModule } from '@digikare/ngx-md-feedback'
easy to use the directive, just add it in a html tag, such as:
<button feedback>feedback</button>
Name | Default Value | Description |
---|---|---|
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 | |
allowTaint |
FALSE | Whether to allow cross-origin images to taint the canvas |
descriptionRequired |
FALSE | Field description is required for enabling 'send' button |
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.
Send feedback
{
"description" : "your content described",
"screenshot" : "data:image/png;base64,theBase64Content",
}
Cancel feedback
{
"error" : "dialog_canceled"
}
Make sure you have Node version >= 12.0 and NPM >= 6
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/cnpm
go to http://127.0.0.1:4200 or http://localhost:4200 in your browser