Negligent Parachute Maintainers

    neutron-star-rating
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    NeutronStarRating

    Built on angular 5, star rating library. Can be used for your angular applications.

    How to Use

    Step 1 - Import in your app module

    import { NeutronRatingModule } from 'neutron-star-rating';
     
    @NgModule({
      declarations: [
        
      ],
      imports: [
        NeutronRatingModule
      ],
      providers: [
      ],
      bootstrap: []
    })
    export class AppModule { }

    Step 2 - Include it in your component

    import { NeutronRatingModule } from 'neutron-star-rating';
     
    @Component({
      selector: 'your-selector',
      templateUrl: 'your template',
      styleUrls: ['./your css'],
      providers: [yourProviders]
    })

    Step 3 - Start using it in your HTML

    <neutron-rating [rating]='4' [starColour]="'#FDD835'" [starSize]="4"></neutron-rating>

    Additional Functions

    1) Passing the new rating to your component

    Step 1 - Add an additional attribute to detect the rating clicked in your html.

    <neutron-rating [rating]='4' [starColour]="'#FDD835'" [starSize]="4" (ratingClicked)='onRatingClicked($event)'></neutron-rating>

    Step 2 - Create a function such as onRatingClicked and retrieve the rating from there

    public onRatingClicked = (ratingNumICanUseInMyComponent) => {
     
      console.log("my new rating that I can use in my component is ");
      console.log(ratingNumICanUseInMyComponent);
    }

    2)Change the number of stars

    Step 1 - Add an additional attribute (starNum) to change the number of stars

    - Warning - If your rating exceeds the number of stars, your rating would be equal to the number of stars
    <neutron-rating [rating]='4' [starColour]="'#FDD835'" [starSize]="4" (ratingClicked)='onRatingClicked($event)' [starNum]="10"></neutron-rating>

    2)Make the stars only readable

    Step 1 - Add an additional attribute (readOnly) to make the stars only readable after initializing it with a value

    - Wearning - You won't be able to change the rating once the readOnly attribute is set to true
    <neutron-rating [rating]='4' [starColour]="'#FDD835'" [readOnly]="true" [starSize]="4" (ratingClicked)='onRatingClicked($event)' [starNum]="10"></neutron-rating>

    Install

    npm i neutron-star-rating

    DownloadsWeekly Downloads

    6

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    67.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • puneeth8994