Rating

Usage

app.html

<cf-rating [properties]="myRating" [styling]="myRatingStyles"></cf-rating>

app.ts

myRating = new RatingModel({
    label: 'Rating label',
    icon: 'stars',
    value: 1,
    max: 5,
    countFromEnd: false,
    iconsVertical: false,
    disabled: false
});

myRatingStyles = new RatingStylingModel({
    container: new StylingModel({
        class: 'my-rating-container',
    }),
    label: new StylingModel({
        class: 'my-rating-label'
    }),
    item: new StylingModel({
        class: 'my-rating-item-icon',
        dynamicClass: "'dynamic-items-class'"
    }),
    iconSize: '30px',
    filledColor: 'lightseagreen',
    emptyColor: 'darkseagreen',
});

app.scss

/deep/ {
       .my-rating-item-icon:not(.cf-rating-disabled) {
              box-shadow: 1px 1px 5px seagreen;
              margin: 3px;
       }
       cf-rating .my-rating-label:not(.cf-rating-disabled) {
              color: darkseagreen;
       }
}

Rating input properties

Attr	Type	Details
label	string	Label for component.
icon	string	Name of the icon (from Material or Font Awesome icons).
value	number	Value of rating and means number of filled/selected icons.
max	number	Number of rating icons
countFromEnd	boolean	Means to start icons counting order.
iconsVertical	boolean	Means to show icons vertically.
disabled	boolean	Means component to be disabled.

Rating styling properties

Attr	Type	Details
label	StylingModel	Styling options for component label.
item	StylingModel	Styling options for component items.
iconSize	string	Means size of component items.
filledColor	string	Css color name for not selected icons.