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