https://github.com/tnicola/ngx-feedback
Angular user feedback collector library
https://github.com/tnicola/ngx-feedback
angular component feedback feedback-form screenshot user-feedback
Last synced: about 1 year ago
JSON representation
Angular user feedback collector library
- Host: GitHub
- URL: https://github.com/tnicola/ngx-feedback
- Owner: tnicola
- License: mit
- Created: 2019-03-16T18:37:47.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-12-02T08:14:11.000Z (over 4 years ago)
- Last Synced: 2024-10-31T17:45:54.998Z (over 1 year ago)
- Topics: angular, component, feedback, feedback-form, screenshot, user-feedback
- Language: TypeScript
- Homepage: https://tnicola.github.io/ngx-feedback/
- Size: 1.92 MB
- Stars: 24
- Watchers: 1
- Forks: 8
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/ngx-feedback)
# ngx-feedback 📸⭐💬
Angular user feedback library
ngx-feedback is an Angular library for collecting Web app users feedbacks. The user will be able to leave a review for the entire page or select a a specific feature and rate it, leaving a comment.
This library is meant to provide a fast, easy and clean way to collect user feedback through visible button and it provides a service that listens for incoming feedback and provides the data.
ngx-feedback relies upon an already existing javascript library [html2canvas](https://github.com/niklasvh/html2canvas) in order to take screenshots of the page.
### Features
- A feedback button will be attached automatically to the edge of the page.
- The possibility to choose for a generic or a specific feedback.
- A screenshot of the selected area on the page.
## Demo
Look at the [demo](https://tnicola.github.io/ngx-feedback/).
## Install
You'll need to install html2canvas lib (required peer-dependency) in order to be able to take screeshots:
npm i html2canvas
Then you can install ngx-feedback:
npm i ngx-feedback
## Usage
The usage is pretty simple, you just need to import `NgxFeedbackModule` and `NgxFeedbackService` and then start listening for feedbacks.
`app.module.ts`
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxFeedbackModule } from 'ngx-feedback';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxFeedbackModule // Add this to your import
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
`app.component.ts`
```typescript
import { Component, OnInit } from '@angular/core';
import { NgxFeedbackService, FeedbackData } from 'ngx-feedback';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
constructor(private readonly feedbackService: NgxFeedbackService) {}
title = 'ngx-feedback-lib';
ngOnInit() {
this.feedbackService.listenForFeedbacks().subscribe((data: FeedbackData) => {
// Use the data coming from the feedback here
});
}
}
```
## License
MIT