Usage of Rating component in Angular, Vue and React

Author - Digvijaysinh Gohil

This is follow up article for The Rating component. Here we will explore Usage of Rating component in Angular, Vue and React also.

While designing this stencil component, we have decided naming convention almost nearby to HTML input type text. So that it can automatically fit in all the situation. This also makes our life easy to add validation for rating-component with different library and different frameworks.

Usage in Angular :

Using an Angular CLI there are two steps for Integration of Rating component.

1) Include the CUSTOM_ELEMENTS_SCHEMA in the modules that uses the components, in most cases we can add it in our app level module.

2) Call defineCustomElements(window) from main.ts or other appropriate place.

=> Using ngModel :

=> Passing value using ‘value’ attribute :

=> Using  form-control in case we need to include it in ReactiveForm Validation :

=> Handling Rate change event and getting rate value as below:

=> While using font-awesome we need to use setSvgString method to pass SVG as string :

Angular demo is also available to given link  .

Usage with ReactJS :

=>  Includes  defineCustomElements(window) from index.js.

=> ReactJS jsx code snippet:

=> Handling rate change event in ReactJS :

=> Using setSvgString method to pass SVG as string :

=> How to set SVG path :

React demo is also available to given link  .

How to Use Rating Component in Vue.js :

=>  Includes  defineCustomElements(window) from index.js.

=> Example of Rating component  :

=> Rate change event handling in Vue JS:

=> Way to call setSvgString method to pass SVG as string in vuejs :

=> How to set SVG path :

 

Vue demo is also available as a result to given link  .

Rating Component

Don’t miss the next post!

Related Posts