I want to use rating star in my ionic 4 android app I try all ways which is worked in ionic 3 but in ionic 4 it’s not working gives errors
1 Like
Thnx for reply , I try this but not works gives error :
vendor.js:26888 Uncaught Error: Template parse errors:
Can’t bind to ‘ngForOf’ since it isn’t a known property of ‘button’. (“uttons>
<button type=“button” [disabled]=“readonly” ion-button slot=“icon-only” fill=“clear” [ERROR ->]*ngFor=“let current of [1, 2, 3, 4, 5]; let i = index”
(click)=“onClick(i + 1)” (mouseover)=”"): ng:///IonicRatingModule/RatingComponent.html@2:92
Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the “@NgModule.declarations”. ("
1 Like
Make sure you remove the old component that you were using.
Yes I remove old components and then install this ionic4 rating npm
I have followed the steps as mentioned in this link
i,e
Step-1 ==> npm i ionic4-rating
Step-2 ==> import { IonicRatingModule } from ‘ionic-rating’; After adding this import i am getting this error [ts] Cannot find module ‘ionic-rating’. [2307].
Below is my app.module.ts file.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { ClientService } from 'src/app/services/client.service';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { Calendar } from '@ionic-native/calendar/ngx';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicRatingModule } from 'ionic-rating';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
HttpModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule ,
IonicRatingModule,
],
providers: [
Calendar,
ClientService,
StatusBar,
SplashScreen,
Geolocation,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
I have tried import { IonicRatingModule } from ‘@ionic/rating’; still the issue is there.
import { IonicRatingModule } from ‘ionic4-rating’;
Not ionic-rating -> ionic4-rating
There is a mistake in the document on NPM
1 Like
Thanks for your responce, i will try your solution now.
<rating [rate]="rate"
readonly="false"
size="default"
(rateChange)="onRateChange($event)">
</rating>
How can i read this rating value in the .ts file?
how can I reduce the size ?
Did you find a solution?
No it didn’t got the solution.
For me works if placed into the global.css file:
#rate_div .sc-ion-buttons-md-s ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 4px;
--padding-end: 4px;
--box-shadow: none;
height: 20px;
font-size: 10px;
}
This prints the chosen rate:
<rating [(ngModel)]="rate"
readonly="false"
size="default"
(ngModelChange)="onRateChange($event)">
</rating>
onRateChange(event) {
console.log('Your rate:', event);
}
Thanks for the response,Now that issue is solved but left with one more.How can i align the rating on left side.Now it’s position is center, It should be on left for all devices, You can see in the below images it is varying for different devices.
Below is page code, I have tried many css properties still no result.
HTML
<ion-header>
<ion-toolbar>
<ion-title>Feedback</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-content>
<ion-item lines="none">
<ion-label position="stacked">Rate this event </ion-label>
<br>
<rating [rate]="rate"
readonly="false"
size="default"
(rateChange)="onRateChange($event)">
</rating>
</ion-item>
</ion-card-content>
<ion-card-content>
<ion-button expand="full">Submit</ion-button>
</ion-card-content>
</ion-card>
</ion-content>
Try:
#rate_div ion-buttons {
display: block;
}
where rate_div is a div around the rate component.
Sorry it didn’t worked for me.
Did you put it in the global.css file?
is there anyway we can show default value after its being rated?
hi,
i’m also getting same error as you Cannot find module ‘ionic-rating’
what worked for you?
Please help me.