Usage of Rating component in Angular, Vue and React

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.

import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, FormsModule],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule {}

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

import { defineCustomElements } from '@logisticinfotech/rating-component/dist/loader';

defineCustomElements(window);

=> Using `ngModel` :

<li-rating ngDefaultControl [(ngModel)]="ratingValue"></li-rating>

=> Passing value using ‘value’ attribute :

<li-rating value="1.8" (input)="onChangeRatingValue($event)"></li-rating>

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

<li-rating ngDefaultControl formControlName="rating"></li-rating>

import { FormGroup, FormBuilder, Validators } from '@angular/forms';

form : FormGroup ;

constructor(
    public formBuilder: FormBuilder
) {
    this.form = this.formBuilder.group({          
        rating: ['', [Validators.required]]    
    });
}


ngOnInit() {   
    // GETTING VALUE CHANGES EVENT IN FORM-CONTROL 
    this.reactiveForm.valueChanges.subscribe(val => {      
        console.log(this.form.value);    
    });  
}

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

onChangeRatingValue(event) {
    console.log('rating value =>' , event.target.value);
}

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

import { ViewChild, ElementRef } from '@angular/core';


@ViewChild('ELEMENT_ID') liRating: ElementRef ;

this.liRating.nativeElement.componentOnReady()
  .then(() => {
      this.liRating.nativeElement.setSvgString('SVG_HTML');
  });

Angular demo is also available to given link  .

Usage with ReactJS :

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

import { defineCustomElements } from '@logisticinfotech/rating-component/dist/loader';

defineCustomElements(window);

=> ReactJS jsx code snippet:

<li-rating id="liRating" value="1.8" (input)={this.onChangeRatingValue}
></li-rating>

=> Handling rate change event in ReactJS :

onChangeRatingValue = (e) => {
    console.log('rating value =>' , e.target.value);
}

=> Using `setSvgString` method to pass SVG as string :

var liRating = document.getElementById('ELEMENT_ID');

setTimeout(() => {
    liRating.setSvgString('SVG_HTML');
}, 1000);

=> How to set SVG path :

import `SVG_NAME` from '`YOUR_SVG_FILE_PATH`';

<li-rating svg-icon-path={`SVG_NAME`}></li-rating>

React demo is also available to given link  .

How to Use Rating Component in Vue.js :

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

import { defineCustomElements } from '@logisticinfotech/rating-component/dist/loader';

defineCustomElements(window);

=> Example of Rating component  :

<li-rating v-on:input="onChangeratingValue($event)"></li-rating>

=> Rate change event handling in Vue JS:

export default {
  methods: {
    onChangeRatingValue: function(e) {
        console.log('rating value =>', e.target.value);
    }
  }
}

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

var liRating = document.getElementById('ELEMENT_ID');

setTimeout(() => {
    liRating.setSvgString('SVG_HTML');
}, 1000);

=> How to set SVG path :

<li-rating v-bind:svg-icon-path="require('@/assets/`SVG_NAME`')">
</li-rating>

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