5+ Angular 2 Rating & Review Components

It’s incredible how many apps have a number rating or review system which essentially shows stars (usually out of 5) for a component. Having done this before for a few web apps, it’s handy to have the basic styles built into the angular component which you can use straight away when you import the package and setup the rate class in your directive.  Here are some Angular 2 Rating & Review Components which you can use for your app.

1. Angular Star Rating Directive

Angular Star Rating Directive
Angular Star Rating Directive

Here is an explaination on how to create rating feature using angular js directive concept and send the rating value to backend ( service ). Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Demo

2. ngx-rating

ngx-rating
ngx-rating

Simple rating control for your angular2 applications using bootstrap3. Does not depend of jquery. If you want to use it without bootstrap – simply create proper css classes. Please star a project if you liked it, or create an issue if you have problems with it.

Code

3. Angular 2 Rating Stars Example

Angular 2 Rating Stars Example
Angular 2 Rating Stars Example

Angular 2 rating stars will allow the visitors of your website to rate a document, image or something else by clicking on the stars. You can specify other icons than stars. Angular 2 rating stars component is very useful.

Demo

4. NG2Rating

NG2Rating
NG2Rating

A simple Angular 2 component for rating items with stars. Fork and clone this repo, Install the necessary dependencies, and Run the TypeScript compiler, watch for changes, start the server, and launch the browser.

Code Demo

5. Angular 4 Rating ionic2-rating

Angular 4 Rating ionic2-rating
Angular 4 Rating ionic2-rating

An Angular 4 (formerly Angular 2) component to visualize a star rating bar, built for Ionic 2+. To use import Ionic2RatingModule on module definition that declares the page where you want to add the rating component. In some cases, all pages are declared on src/app/app.module.ts.

Code

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

Leave a Reply

Your email address will not be published. Required fields are marked *