ngx-md-feedback

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.

Demo

Prerequisites

make sure your project:

• is an angular(version >= 6.0.0) project
• has set up angular material

How to use it in your project

download it from npm

npm install ngx-md-feedback --save

use the feedback module in your project, at any module, you just need to imports into your module:

import { NgxMdFeedbackModule } from 'ngx-md-feedback'

easy to use the directive, just add it in a html tag, such as:

<button feedback>feedback</button>

Properties

| 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 | | description | | Set the field description |

method

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.

Responses

Send feedback

{
 "description" : "your content described",
 "screenshot" : "data:image/png;base64,theBase64Content",
}

Cancel feedback

{
 "error" : "dialog_canceled"
}

Getting started with this repo

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/cnpm

go to http://127.0.0.1:4200 or http://localhost:4200 in your browser