Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ionic3-star-rating
Advanced tools
Readme
You can give your custom icons, custom color, custom font-size and also make it read-only.
You can specify the total number of icons to be displayed, default is set to 5. You may change this to 10 star rating component or 7 star rating component depending on your requirement.
Supports Half Star Rating.
Single tap on default-star-icon changes it to half-star-icon, tap on half-star-icon changes it to full-star-icon and tap on full-star-icon changes it to half-star-icon. The rating value then steps by 0.5 instead of 1.
You can use it multiple times in a single page/multiple pages and get the changed rating value in the parent component.
You can also use it inside the <form>
component (multiple use inside <form>
is also supported).
Easy to integrate with your Ionic 2 or Ionic 3 projects. Demo: https://stackblitz.com/edit/ionic3-star-rating-melwin
For ionic-4 projects please check this package : https://www.npmjs.com/package/ionic4-star-rating
npm i ionic3-star-rating
<ionic3-star-rating #rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#488aff"
defaultColor = "#f4f4f4"
readonly="false"
rating="3"
fontSize = "32px"
(ratingChanged)="logRatingChange($event)">
</ionic3-star-rating>
<form>
component <form [formGroup]="customForm">
<ionic3-star-rating #rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#d1301a"
defaultColor = "#aaaaaa"
readonly = "false"
fontSize = "32px"
(ratingChanged)="logRatingChange($event)"
formControlName="starRating">
</ionic3-star-rating>
</form>
<form>
component import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ParentPage } from './parent';
import { StarRatingModule } from 'ionic3-star-rating';
@NgModule({
declarations: [
ParentPage,
],
imports: [
StarRatingModule,
IonicPageModule.forChild(ParentPage),
],
})
export class ParentPageModule {}
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
constructor() {
// do your stuff
}
logRatingChange(rating){
console.log("changed rating: ",rating);
// do your stuff
}
import { Component, ViewChild } from '@angular/core';
import { IonicPage, Events } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
@ViewChild('rating') rating : any;
constructor(private events : Events) {
// do your stuff
}
ngOnInit() {
this.events.subscribe(this.rating.eventInfo.topic, ()=> {
console.log("changed rating", this.rating._rating);
// do your stuff
});
}
<form>
componentimport { Component, ViewChild } from '@angular/core';
import { IonicPage, Events } from 'ionic-angular';
import { FormBuilder, FormGroup } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
customForm: FormGroup;
constructor( private events : Events, private formBuilder: FormBuilder ) {
// do your stuff
}
ngOnInit() {
this.customForm = this.formBuilder.group({
starRating: [3] // set the default value
});
}
logRatingChange(rating){
console.log("changed rating: ",rating);
// do your stuff
}
<ionic3-star-rating #rating
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#ff0000"
defaultColor = "#aaaaaa"
readonly = "false"
rating = "2"
fontSize = "32px"
(ratingChanged)="logRatingChange($event)">
</ionic3-star-rating>
<ionic3-star-rating #rating2
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#d1301a"
defaultColor = "#aaaaaa"
readonly = "false"
rating = "3"
fontSize = "32px"
(ratingChanged)="logRatingChange2($event)">
</ionic3-star-rating>
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
constructor() {
// do your stuff
}
logRatingChange(rating){
console.log("changed rating: ",rating);
// do your stuff
}
logRatingChange2(rating){
console.log("changed rating2: ",rating);
// do your stuff
}
}
import { Component, ViewChild } from '@angular/core';
import { IonicPage, Events } from 'ionic-angular';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
@ViewChild('rating') rating : any;
@ViewChild('rating2') rating2 : any;
constructor(private events : Events) {
// do your stuff
}
ngOnInit() {
this.events.subscribe(this.rating.eventInfo.topic, ()=> {
console.log("changed rating", this.rating._rating);
// do your stuff
});
this.events.subscribe(this.rating2.eventInfo.topic, ()=> {
console.log("changed rating2", this.rating2._rating);
// do your stuff
});
}
<form>
of the parent page <form [formGroup]="customForm">
<ionic3-star-rating #rating
activeColor = "#ff0000"
defaultColor = "#aaaaaa"
readonly = "false"
(ratingChanged)="logRatingChange($event)"
formControlName="starRating">
</ionic3-star-rating>
<ionic3-star-rating #rating2
activeColor = "#ff0000"
defaultColor = "#aaaaaa"
readonly = "false"
(ratingChanged)="logRatingChange2($event)"
formControlName="starRating2">
</ionic3-star-rating>
</form>
import { Component } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { FormBuilder, FormGroup } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-landing',
templateUrl: 'landing.html',
})
export class LandingPage {
customForm: FormGroup;
constructor( private formBuilder: FormBuilder ) {
// do your stuff
}
ngOnInit() {
this.customForm = this.formBuilder.group({
starRating: [3],
starRating2: [4]
});
}
logRatingChange(rating){
console.log("changed rating: ",rating);
// do your stuff
}
logRatingChange2(rating){
console.log("changed rating2: ",rating);
// do your stuff
}
this.events.subscribe('star-rating:changed', (rating) => {
console.log("changed rating: ",rating);
});
gmail : melwin.vincent.90@gmail.com
FAQs
A simple component for star rating
The npm package ionic3-star-rating receives a total of 314 weekly downloads. As such, ionic3-star-rating popularity was classified as not popular.
We found that ionic3-star-rating demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.