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.
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.
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
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
});
}
}
Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.
This awesome script developed by tnicola. Visit their official repository for more information and follow for future updates.