How to create a Rating Component in Lightning Web Component?

Hello #Trailblazers,

In this blog post, we are going to talk how to create the rating component using Lightning Web Component

There are many use cases when we need to develop the rating component to display the rating for example survey result, interview feedback.

Step1 – Create Static Resource

Create a Static resource and name it fivestar and you can get the Static Resource. Five Star Rating

Step2 – Create a Lightning Web Component

Now, once you have create the Static resource, it’s time to Create the Rating Component.

Create a Lightning Web Component
use the code from the Given link
Link to Code

Usage

Call the component from the parent component like below

<div >
                <lightning-tile label="Salesforce" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="5" onratingchange={handleRatingChanged} ></c-five-star-rating>
                </lightning-tile>    
            </div>

Code Explanation

value – In the code, you can see that I have passed one variable value which indicates what value you wanted to pass and the valid values are 1-5
onratingchange – this is the event raised by the rating component which in return sends the rating value from 1-5
readOnly – If you wanted your rating to be read-only then pass any value to this property like read-only=”yes”
handleRatingChanged(event){ let rating=event.detail.rating; }

Step3 – Create a feedback Component

Create a Lightning Web Component
use the code from the Given link
Link to Code

<!--
    @description       : 
    @author            : Amit Singh
    @group             : 
    @last modified on  : 12-18-2020
    @last modified by  : Amit Singh
    Modifications Log 
    Ver   Date         Author                               Modification
    1.0   12-18-2020   Amit Singh   Initial Version
-->
<template>
    <lightning-card title='Skill Set'>
        <div class="slds-m-top_medium slds-m-bottom_x-small">
            <div >
                <lightning-tile label="Salesforce" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="5" onratingchange={handleRatingChanged} ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div>
                <lightning-tile label="Integration" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="5" ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div>
                <lightning-tile label="Lightning Development" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="5" ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div >
                <lightning-tile label="Admin" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="5" ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div>
                <lightning-tile label="Communities" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="4" ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div>
                <lightning-tile label="CI/CD" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="4" ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div >
                <lightning-tile label="Project Management" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="3.5" ></c-five-star-rating>
                </lightning-tile>    
            </div>
            <div >
                <lightning-tile label="MuleSoft" href="JavaScript:void(0);" type="media">
                    <c-five-star-rating value="3" ></c-five-star-rating>
                </lightning-tile>    
            </div>
        </div>
    </lightning-card>
</template>

Step4 – Preview the Feedback Component

Now, as you have created the feedback component. You can add your component to either Aura Application, OR Lightning Pages to see the outcome. Refer below image