andrucz / ionic2-rating Goto Github PK
View Code? Open in Web Editor NEW:star: Angular star rating bar. Built for Ionic 2+.
License: MIT License
:star: Angular star rating bar. Built for Ionic 2+.
License: MIT License
Hi, i am working on rating functionality i have added ionic2-rating plugin it worked fine. But i want add my own svg image in the place of star for the below code, How can i achieve this?
<rating [(ngModel)]="rate"
readOnly="false"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)">
Hey,
Probably more of a noob issue than an issue at all, but Ive been playing around with your plugin today and Im having some difficulties.
For some reason in my ionic 2 app that im trying to write, the styling that I put in the corresponding scss file to the html file im using never seems to work, hence in this situation, all I get all the time is 5 little stars.
I would be grateful if you could help me with the update script?
I'm noticing a click delay when tapping a star on iOS. Do you think you need to add a "tappable" attribute on the stars markup? http://ionicframework.com/docs/v2/faq/#click-delays
I'm pretty new to ionic and angular and have a hard time figuring out how to detect changes when the ratings are changed.
I have the ratings displayed, and changing the votes works, but how to detect the change for later use ?
Hello!
When I click in the same star that I did, event is empty and not recive the star value. ¿Is there something wrong?
Thx!!
The plugin won't work with ionic 4:
[ng] ERROR in ./node_modules/ionic2-rating/dist/ionic2-rating.module.js
[ng] Module not found: Error: Can't resolve 'ionic-angular' in '/private/var/www/youchange/hibrido/node_modules/ionic2-rating/dist'
The solution is to change:
import { IonicModule } from 'ionic-angular';
for:
import { IonicModule } from '@ionic/angular';
Cannot backtrack the error as the only message I get is this
Uncaught TypeError: Object #<Object> has no method 'NgModule', http://192.168.0.11:8100/build/js/app.bundle.js, Line: 100238
Im trying to remove padding and margin but unable to do that,
Where exactly should I put the css? I can tell that the component is working well but not visible on the page.
Hi,
I like to ask how we can set a initial value (1) ? with the following code.
<rating [(ngModel)]="option.key" max="5" name="{{option.key}}"
ng-init="option.key='1'">
Note: I generate these elements dynamically, based on REST response.
Note 2: ng-init="option.key='1'" doesn't work... However, it used to work with ionic 1
Roy
Hi
when I'm trying to change padding on the li nothing happens.
any help ..
Thanks
I am not sure if this issue is related but when upgrading my project to ionic 3 I get the following runtime error:
Uncaught (in promise): Error: Template parse errors: 'rating' is not a known element: 1. If 'rating' is an Angular component, then verify that it is part of this module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div style="text-align: center; margin-top: 12px"> <ion-item> [ERROR ->]<rating readOnly="true" [(ngModel)]="rating"></rating> </ion-item> <button *ngFor="let transpor"): ng:///HomeModule/HomePage.html@28:4 Error: Template parse errors: 'rating' is not a known element: 1.
..etc
Not sure if there is a work around to this or I am missing something? Cheers :)
Hello Team
I had followed the complete steps mentioned but i am getting en error, please help me to get rid of this problem.
Error:
ERROR in ./node_modules/ionic2-rating/dist/ionic2-rating.module.js
Module not found: Error: Can't resolve 'ionic-angular' in '/Users/kanishka/Desktop/starrating/node_modules/ionic2-rating/dist'
Thanks in advance.
</ion-card>
<h2>{{rate}}</h2>
Hello,
I'm using Ionic v3.19.0.
I have multiple ratings on the same page. When I click on one of them, every ratings in that page take the same value. It was ok before.
Here is the html I'm using to display ratings :
<ion-item>
<h2 text-wrap>{{q.text}} :</h2>
<rating [(ngModel)]="q.answer"
readOnly="false"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
value="q.answer"
iconOnColor= red
iconOffColor= red
(ngModelChange)="selectAnswer(q, $event)">
</rating>
</ion-item>
And my environment infos :
cli packages:
@ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
@ionic/app-scripts : 1.3.0
Cordova Platforms : android 6.1.2 ios 4.5.3
Ionic Framework : ionic-angular 3.0.1
System:
Android SDK Tools : 26.0.1
ios-deploy : 1.9.2
ios-sim : 6.1.2
Node : v7.4.0
npm : 5.5.1
OS : macOS Sierra
Xcode : Xcode 9.1 Build version 9B55
Environment Variables:
ANDROID_HOME : /Users/nicolas/Library/Android/sdk
Misc:
backend : pro
Hello,
I am wondering if there is any way of integrating this into google-maps native htmlInfoWindow?
I tried the following but only the rating div is present, the component is not processed so no ul inside.
let marker: Marker = params[1];
let htmlInfoWindow = new HtmlInfoWindow();
let frame: HTMLElement = document.createElement('div');
frame.innerHTML = [
'<h2>'+ marker.get("name") +'</h2>',
'<rating [(ngModel)]="'+ marker.get("rating") +'" readOnly="true" max="5" emptyStarIconName="star-outline" halfStarIconName="star-half" starIconName="star" nullable="false"></rating>',
'<a (click)="openPage(TourismRestaurantDetailedPage,'+ marker.get("restaurantId") +' )">Tovább ></a>'
].join("");
htmlInfoWindow.setContent(frame, {
width: "230px",
height: "150px",
});
htmlInfoWindow.open(marker);
When I set the rootPage
the EvaluateComponent (Component that have the rating module) in my app.component
that works fine.
But when I set my rootPage
an other component, like the login component, and go to the rating page, doesn't update the rate values.
when The rootPage is other Page:
when the rootPage is the rating page:
ps: the NgModel is updating in the console!
Hello,
I want to set rating in ionic2. when page load I want to fetch the data from server and based on rating received from server I want to display it to user.
Can you please help me in this?
Note:- User can't update it.
Hello I have this error
typescript error
'rating' is not a known element: 1. If 'rating' is an Angular component, then verify that it is part of this
module. 2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("m
text-center> [ERROR ->]<rating
[(ngModel)]="rate" readOnly="false" max="5" ")
Any way to fix?
Best
Hey!
I want to customize component styles with change the scss file , everything is ok but &.rating li padding, No matter how I modify the padding value ,it’s doesn’t work。 what should I do? I need your help。 Thanks!
This is just a heads up.
Incase you run into this error (like I did), check this thread out for the solution
How can I set readonly property from m .ts or m .html?
Thx
I'm learning with ionic 2
I'm using typescript
Hi I'm facing an error while using this package on production build.
Environtment:
@ionic/cli-utils : 1.8.1
ionic (Ionic CLI) : 3.8.1
global packages:
Cordova CLI : 7.0.1
local packages:
@ionic/app-scripts : 2.1.3
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.6.0
System:
Node : v8.2.1
npm : 5.3.0
OS : Linux 4.10
The error says:
Error: Template parse errors:
'rating' is not a known element:
1. If 'rating' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("orderData.status == "delivered"'>
<p class="text-primary text-center">Rate Your Experience?</p>
[ERROR ->]<rating style="font-size: 20px !important;" [(ngModel)]="rate"
readOnly="false"
"): ng:///home/rizal/ionic-project/biogreen-mobile/src/pages/order/order-details/order-details.html@43:2
[DEBUG] Error: Template parse errors:
'rating' is not a known element:
1. If 'rating' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("orderData.status
== "delivered"'>
<p class="text-primary text-center">Rate Your Experience?</p>
[ERROR ->]<rating style="font-size: 20px !important;" [(ngModel)]="rate"
readOnly="false"
"): ng:///home/rizal/ionic-project/biogreen-mobile/src/pages/order/order-details/order-details.html@43:2
at syntaxError
(/home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:1550:34)
at TemplateParser.parse
(/home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:12041:19)
at AotCompiler._compileComponent
(/home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:22867:39)
at /home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:22764:55
at Array.forEach (native)
at AotCompiler._compileSrcFile
(/home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:22748:20)
at /home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:22725:91
at Array.map (native)
at /home/rizal/ionic-project/biogreen-mobile/node_modules/@angular/compiler/bundles/compiler.umd.js:22725:56
at <anonymous>
While I run ionic cordova build android --prod
this produce error like above. But it run normally on ionic cordova build android
(debug mode), FYI I'm new to Angular & Ionic, & I was looking on google about this issue but nothing usefull. Thanks!
If star icon font size by changing in css as given in customize component styles that are set same for all over the project so I want to set a different font size So how to set?
<ion-list>
<ion-item>
<rating [(ngModel)]="rate"
readOnly="false"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false"
(ngModelChange)="onModelChange($event)">
</rating>
</ion-item>
</ion-list>
Any help?
I see that in your source code you have styles and template not defined in a separate file but rather defined them (the template and styles) in the component itself. I like to know if we can use separate files for template and styles and also use scss instead of css
Hello, I'm using the plugin, but I can not leave a lot of stars marked, what could I be doing wrong? I'm using rate, but it's not right
<rating [(ngModel)]="rate"
readOnly="true"
rate="2"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false">
Error: Template parse errors:
rating' is not a known element:
. If 'rating' is an Angular component, then verify that it is part of this module.
. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this
component. ("
Rating
[ERROR ->]<rating [(ngModel)]="rate" readOnly="false" max="5" emptyStarIconName="star-outline" halfStarIconName"): ng:///G:/development_workspace/mobile_app/project/src/pages/postajob/postajob.html@100:4
Hello,
rating bar in i want full star means if i click 1 star it's rating is 1.
need 1 rating for 1 star. is it possible?
any document for that?
Hello again andrucz!
First of all, sorry if my question is a question from newbie in angular/ionic, because I am.
I want to do a loop with your module, but it does not work for me, because here [(ngModel)]="rate" it's like that only works once and only could receive this.rate once from component. Is that true or there is other way?
I have an array with several rating.
Thank a lot!!
First of all, let me say thank you for this very nice component!
Is there a way I can tap on a star and, according to the place, gives a half star rating?
In my case, I want to have a 1-10 range, but only 5 stars...
Thanks for your attention!
<ion-col *ngFor="let item of recipes" width-50
<ion-item
<rating
readOnly="true"
max="5"
emptyStarIconName="star-outline"
halfStarIconName="star-half"
starIconName="star"
nullable="false" /rating>
ion-title{{item.Rate}} /ion-title
/ion-item>
/ion-col>
I have a code like this. I need to assign {{item.Rate}} value to rating selector for each item in recipes. What should I do?
After following this tutorial:
http://www.joshmorony.com/how-to-unit-test-an-ionic-2-application/
Karma appears to complain about how ionic2-rating uses an "Uncaught SyntaxError: Unexpected token export".
Using awk, I examined the giant karma bundle file, and traced down the error to this:
"node_modules/ionic2-rating/index.js']=[function(require,module,exports,__dirname,__filename){ export { Ionic2RatingModule } from './module';"
I suspect this is because the ionic2-rating distribution code is compiled to ES6, and the unknown token is "export". Can you recompile the code to ES5 so that it will play nicely with karma and other test runners?
I am getting above error when trying to build the IOS package. ionic serve works but ionic build ios failed with below stacktrace :
[22:21:14] lint finished in 991 ms
[22:21:16] ngc: Error: Unexpected value 'Ionic2RatingModule' imported by the module 'AppModule'
at /Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler/bundles/compiler.umd.js:13982:37
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (/Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler/bundles/compiler.umd.js:13967:46)
at /Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler/bundles/compiler.umd.js:12812:58
at Array.forEach (native)
at OfflineCompiler.analyzeModules (/Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler/bundles/compiler.umd.js:12811:21)
at CodeGenerator.codegen (/Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler-cli/src/codegen.js:105:47)
at codegen (/Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler-cli/src/main.js:7:81)
at Object.main (/Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/tsc-wrapped/src/main.js:30:16)
at Object. (/Users/chitrang/ionic2/CaffeIOT/node_modules/@angular/compiler-cli/src/main.js:14:9)
[22:21:16] ngc: Compilation failed
[22:21:16] ngc failed: NGC encountered an error
[22:21:16] Error: NGC encountered an error
at ChildProcess. (/Users/chitrang/ionic2/CaffeIOT/node_modules/@ionic/app-scripts/dist/ngc.js:62:24)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at maybeClose (internal/child_process.js:877:16)
at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
Error running ionic app script "build": Error: NGC encountered an error
..========================================================
app.module.ts snapshot:
import { Ionic2RatingModule } from 'ionic2-rating/module';
@NgModule({
declarations: [
MyApp,
HomePage,
Orders,
PlaceOrder,
OrderDetail
],
imports: [
IonicModule.forRoot(MyApp),
Ionic2RatingModule
],
Please advice.
Is there any way to start with for example 3 of 5 stars painteds?
Hi there..
Tried to use this module inside the loop. But can't assign variable via ngModel. Probably I am missing something. How to use multiple readonly instances of this module?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.