# @bumblebee032/ng-feedback

> An angular directive for sending feedback featuring Angular 6, Html2canvas, Angular Material, Rxjs, inspired by Google send feedback, based on angular-cli.

Latest version **2.0.97** (published 2020-01-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bumblebee032/ng-feedback
pnpm add @bumblebee032/ng-feedback
yarn add @bumblebee032/ng-feedback
bun add @bumblebee032/ng-feedback
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.97 |
| Published | 2020-01-13 |
| First published | 2020-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 703.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rickon Chen |
| Maintainers | bumblebee032 |
| Keywords | angular6, rxjs, html2canvas, feedback, directive |

## Links

- npm: https://www.npmjs.com/package/@bumblebee032/ng-feedback
- Repository: https://github.com/DarrenLouw/feedback
- Homepage: https://github.com/DarrenLouw/feedback#readme
- Issues: https://github.com/DarrenLouw/feedback/issues
- npm.io page: https://npm.io/package/@bumblebee032/ng-feedback

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 2.0.97 (latest) — 2020-01-13
- 2.0.96 — 2020-01-13
- 2.0.95 — 2020-01-13
- 2.0.91 — 2020-01-10
- 2.0.9 — 2020-01-10
- 2.0.8 — 2020-01-10
- 2.0.6 — 2020-01-10
- 2.0.5 — 2020-01-10
- 2.0.4 — 2020-01-10
- 2.0.3 — 2020-01-10
- 2.0.2 — 2020-01-10
- 2.0.1 — 2020-01-10

## README

# feedback
> An angular directive for sending feedback featuring [Angular 6](https://angular.io), [Html2canvas](https://html2canvas.hertzen.com/), [Angular Material](https://material.angular.io), [Rxjs](https://rxjs-dev.firebaseapp.com/), inspired by Google send feedback, based on [angular-cli](https://github.com/angular/angular-cli).

## Demo
![Alt text](/../screenshots/feedback.gif?raw=true "overview")

### Prerequisites
make sure your project:
* is an angular(version >= 6.0.0) project
* has set up [angular material](https://github.com/angular/material2/blob/master/guides/getting-started.md)

#### How to use it in your project
> download it from npm

```bash
npm install @bumblebee032/ng-feedback --save
```

use the feedback module in your project, at any module, you just need to imports into your module:
```es6
import { FeedbackModule } from '@bumblebee032/ng-feedback'
```

easy to use the directive, just add it in a html tag, such as:
```
<button feedback>feedback</button>
```

#### Properties

| 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                                                                  |
| `headerColour`   | rgb(96, 125, 139)                                                     |

### 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.

### 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`](/src/app/feedback)

```bash
# 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](http://127.0.0.1:4200) or [http://localhost:4200](http://localhost:4200) in your browser

---
_Source: https://npm.io/package/@bumblebee032/ng-feedback · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._