Ionic 4 star rating - styling

I downloaded the ionic 4 star rating component from npm:

I can get it to display.

I have tried to change the size, colour and outline of the stars, but nothing seems to work.

In my scss file where the rating componint is displayed I have added styles:
.rating {
ion-icon {
// color: gray;
color: red;
fill: none;

&.outline {
   fill: none; 
}

&.filled {
 // color: #ffb400;
 color: pink;
}

Tried my own version:
.rating {
ion-buttons{
–width: 10px;
–height: 10px;
–border-radius: 50%;
–vertical-align: middle;
–padding-start: 2px;
–padding-end: 2px;
–color: pink;
}
}

Tried changing the size in the html:

<rating
[rate]= [item.rating]
readonly=“true”
size=“10px” size=“small” size=“default”
emptyStarIconName=“star-outline”
halfStarIconName=“star-half” (rateChange)=“onRateChange($event)”>

It would be great if someone could point me in the right direction. Should i be using another component altogether? Or how do I see the properties of the component so that I can style them? Inspecting the element does not help.

Thanks

sorry my english, this function also does not appear for me, Im implementing exactly as they said

how made it to display? After running this command ===> npm i ionic4-rating in cli, I just imported like this import { IonicRatingModule } from ‘ionic-rating’; in app.module.ts file.
My app.module.ts file looks like this:

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 am getting this error ===> [ts] Cannot find module ‘ionic-rating’. [2307]

You can import like this

import { IonicRatingModule } from 'ionic4-rating';

I did it like above on my page module and it runs.

Thanks for the reply.

I am trying to apply css for the rating, I have tried many css properties over rating tag, But i am unable to apply any css.

Below is my HTML

<ion-header>
  <ion-toolbar>
    <ion-title>Rating</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-card>
        <ion-card-content>
            <ion-item lines="none">
                <ion-label  position="stacked">Rate this item </ion-label>
                  <rating  [rate]="rate"
                      readonly="false" 
                      size="default"
                      (rateChange)="onRateChange($event)">
                </rating>
             </ion-item>
        </ion-card-content>
    </ion-card>
</ion-content>

The UI looks like this:

sd

I want align the rating to left for all devices.I have wrapped this rating tag inside another div and applied css i,e (float:left; text-align:left;) but nothing worked. I just want to align the rating on left side fixed for all devices.

You should give the css in global.css. I did it with scss and I used id for different rating class.

#sample-books {
    margin-top: 5px;
    ion-buttons {
        float: left;
    }
    ion-button {
        width: 26px !important;
        height: 20px !important;
        display: contents;
    }
    ion-icon {
        width: 18px;
        height: 20px;
        color: gray;

        &.filled {
            //color: #ffb400;
            color: var(--ion-color-RRyellow) !important;
        }
    }
}

#book-detail {
    ion-button {
        width: 32px !important;
        height: 24px !important;
    }
    ion-icon {
        color: gray;
        &.filled {
            color: #ffb400;
        }
    }
}
1 Like

Means i need give id for rating tag and apply css for that id in global.css file? I didn’t understood can you please post the HTML also.

Yes exactly as you said. Sorry for my english.

<rating id="sample-books" [rate]="book.rate" readonly="true" size="default"></rating>
1 Like

Hello @madeymaja

i have created a new package that solves all your issues .
Please have a look.

Regards,
Melwin Vincent C

1 Like

Events is deprecated ERROR

Events deprecated. Sad.
Module really looks powerful, otherwise.

follow your steps but it not showing stars.