After npm i ionic4-rating
import { IonicRatingModule } from ‘ionic4-rating’;
Not { IonicRatingModule } from ‘ionic-rating’;
After npm i ionic4-rating
import { IonicRatingModule } from ‘ionic4-rating’;
Not { IonicRatingModule } from ‘ionic-rating’;
i am using this but getting this error
Uncaught Error: Template parse errors:
‘rating’ is not a known element:
<ion-content padding>
[ERROR ->]<rating [(ngModel)]="rate"
readonly="false"
size="default"
"): ng:///RatingModalPageModule/RatingModalPage.html@7:4
at syntaxError (compiler.js:2430)
my html is
<ion-content padding>
<rating [(ngModel)]="rate"
readonly="false"
size="default"
(ngModelChange)="onRateChange($event)">
</rating>
<ion-grid>
<ion-row>
<ion-col text-center>
ID : {{productId}}
</ion-col>
</ion-row>
<ion-row>
<ion-col text-center>
<ion-button (click)="closeModal()">Close Modal</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Have you added IonicRatingModule,
inside imports
in app.module.ts
file? If not please do this in app.module.ts
file
import { IonicRatingModule } from 'ionic4-rating';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
IonicRatingModule, <=======Add here
],
yes i have added this but still not working same error
Open your page.module.ts then add this
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
Then adjust this too below
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicRatingModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [CreateReviewPage],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
@aayush2589 You’re welcome if you have issues with styling the stars by reducing the size etc you can ask as well
How To Set Border colour & inner Colour And Increase The Size Of Star.
To reduce the size check
<div class="rate_div">
<rating [rate]="review.rating" readonly="true">
</rating>
</div>
Then in global.scss
.rate_div {
rating {
[ion-button][disabled] {
opacity: 1;
}
ion-buttons {
display: flex;
justify-content: left !important;
font-size: 20px !important;
}
ion-icon {
color: gray;
font-size: 20px !important;
&.filled {
color: #ffb400;
font-size: 20px !important;
}
}
}
}
For your ionic-4 applications use this package
Everything you have to do is well documented
It is very easy to integrate to your application
thanks but
ion-icon {
color: white;
font-size: 20px !important;
I am Using This but Star Innercolour not changed.
The innercolour when it is not selected right???
Hello, I’m getting this error. Can you help me to resolve this?
TypeError: this._onChange is not a function
You didnt create the fucntion in your ts file
What that function will do? I created onRateChange function. Why i need to create onChange function
Show your code and let’s see what you’re doing
And how can we send the rating value to the play store? Because that component only shows a pop up with the stars.
i am only store the value. i am not send to play store
if i use rating for eg: 2.6 out of 5.Instead of showing 2 .6 portion of a star its showing 3 star (its rounding up the value after 2.5 is there is any way to change it? but its working fine on 2.4 its showing similar to 2.5
Cannot read property ‘rating’ of undefined showing in console log