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 in order to take screenshots of the page.

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

Look at the demo.

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 

The usage is pretty simple, you just need to import NgxFeedbackModule and NgxFeedbackService and then start listening for feedbacks.

app.module.ts

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

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 }); } }

MIT