Skip to content

Installing

Michael Hladky edited this page Jul 7, 2018 · 8 revisions

You can install angular-star-rating in many ways. The main installing process is described below.

As a precondition i consider you have an assets folder that is included in the bundled version of your app. (which is by default if you use the angular-cli).

Get angular-star-rating:

  • clone & build this repository
  • download as .zip
  • via npm: by running $ npm install angular-star-rating --save from your console
  • via yarn: by running $ yarn add angular-star-rating --save from your console

Install the angular-star-rating package

  1. Import your library in your angular application by running:

    • $ npm install angular-star-rating css-star-rating --save
  2. Copy the images from your ./node_modules/angular-star-rating/assets/images folder into ./src/assets/images folder.

  3. Import the star.rating.scss file i.e. import it in your styles.scss file with @import '~css-star-rating/scss/star-rating';

  4. Make sure all files and assets are loaded.

  5. Import the StarRatingModule in your app.module.ts and set it as import under your AppModule configurations:

    // app.module.ts
    
    // Import the library
    import { StarRatingModule } from 'angular-star-rating';
    
    @NgModule({
      ...
      imports: [
        ...
        // Use forRoot to import the StarRatingModule
        StarRatingModule.forRoot()
      ],
      ...
    })
    export class AppModule { }
  6. Once your library is imported, you are ready to use the components in your application:

    <!-- app.component.html  -->
    
    ...
    <star-rating [starType]="'svg'" [rating]="2.63"></star-rating>

If something is not working check if

  • the component renders the expected html
  • if you use the svg version check if the star-rating.icons.svg is present in your ./src/assets/images and loaded