`

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { SatisfactionSurveyPage } from './pages/satisfaction-survey.page';
import { IonicRatingModule } from 'ionic-rating-component';

@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
IonicRatingModule,
RouterModule.forChild([
{
path: '',
component: SatisfactionSurveyPage
}
])
],
declarations: [SatisfactionSurveyPage],
exports: [ ]
})
export class SatisfactionSurveyPage {}

`

Step 3

To get the changed rating in the parent component

$3

`

import { Component } from '@angular/core';

@Component({
selector: 'app-satisfaction-survey',
templateUrl: 'satisfaction-survey.page.html',
styleUrls: ['satisfaction-survey.page.scss']
})
export class SatisfactionSurveyPage {

constructor() {

}

onRatingChange(rating){
console.log('The evaluation was modified and now its value is: ',rating);
// do your stuff
}
}


`

$3

`

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

@Component({
selector: 'app-satisfaction-survey',
templateUrl: 'satisfaction-survey.page.html',
styleUrls: ['satisfaction-survey.page.scss']
})
export class SatisfactionSurveyPage implements OnInit, OnDestroy {

@ViewChild('rating') rating : any;

constructor(protected ionicRatingSubscriptionService: IonicRatingSubscriptionService) {}

ngOnInit() {
this.ionicRatingSubscriptionService.getTopicObservable(this.rating.eventInfo.topic).subscribe(value => {

});
}

ngOnDestroy() {
this.ionicRatingSubscriptionService.getTopicObservable(this.rating.eventInfo.topic).unsubscribe();
}
}


`

To get the changed rating in the parent component if you want to use ionic-rating-component inside component

$3

#### sample code in module.ts of parent component

`
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { SatisfactionSurveyPage } from './satisfaction-survey.page';
import { SharedModule } from './../app.shared.module';
import { ReactiveFormsModule} from '@angular/forms';

@NgModule({
declarations: [SatisfactionSurveyPage],
imports: [
IonicModule,
CommonModule,
FormsModule,
SharedModule,
ReactiveFormsModule,
RouterModule.forChild([{ path: '', component: SatisfactionSurveyPage }])
],
exports: []
})
export class SatisfactionSurveyPageModule {}

`


$3

`
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
selector: 'app-satisfaction-survey',
templateUrl: 'satisfaction-survey.page.html',
styleUrls: ['satisfaction-survey.page.scss']
})

export class SatisfactionSurveyPage {

customForm: FormGroup;

constructor( private formBuilder: FormBuilder ) {
// do your stuff
}

ngOnInit() {
this.customForm = this.formBuilder.group({
// set default initial value
starRating: [3]
});

}

onRatingChange(rating){
console.log('The evaluation was modified and now its value is: ',rating);
// do your stuff
}

}

`

Multiple usage of the component in same parent page

$3

`
activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#ff0000"
defaultColor = "#aaaaaa"
readonly = "false"
rating = "2"
fontSize = "32px"
(ratingChanged)="onRatingChange($event)">


activeIcon = "ios-star"
defaultIcon = "ios-star-outline"
activeColor = "#d1301a"
defaultColor = "#aaaaaa"
readonly = "false"
rating = "3"
fontSize = "32px"
(ratingChanged)="onRatingChange2($event)">


`


$3

#### Method 1

`

import { Component } from '@angular/core';

@Component({
selector: 'app-satisfaction-survey',
templateUrl: 'satisfaction-survey.page.html',
styleUrls: ['satisfaction-survey.page.scss']
})

export class SatisfactionSurveyPage {

constructor() {
// do your stuff
}

onRatingChange(rating){
console.log("changed rating: ",rating);
// do your stuff
}

onRatingChange2(rating){
console.log("changed rating2: ",rating);
// do your stuff
}
}

`

#### Method 2 : Using @ViewChild and Observables

`

import { Component, ViewChild } from '@angular/core';
import { Events } from '@ionic/angular'

@Component({
selector: 'app-satisfaction-survey',
templateUrl: 'satisfaction-survey.page.html',
styleUrls: ['satisfaction-survey.page.scss']
})
export class SatisfactionSurveyPage implements OnInit, OnDestroy {

@ViewChild('rating') rating : any;
@ViewChild('rating2') rating2 : any;

constructor() {
// do your stuff
}

ngOnInit() {
this.ionicRatingSubscriptionService.getTopicObservable(this.rating1.eventInfo.topic).subscribe(value => {

});
this.ionicRatingSubscriptionService.getTopicObservable(this.rating2.eventInfo.topic).subscribe(value => {

});
}

ngOnDestroy() {
this.ionicRatingSubscriptionService.getTopicObservable(this.rating1.eventInfo.topic).unsubscribe();
this.ionicRatingSubscriptionService.getTopicObservable(this.rating2.eventInfo.topic).unsubscribe();
}
}

`

Multiple usage of ionic-rating-component component in the same of the parent page

$3