I do have a question please.
How do I get the RatingComponent
to update my model object with its newly selected score
value?
Details:
I am using the RatingComponent
, as shown in the previous reply comment. When a user clicks on the stars of the RatingComponent
, it calls the update
function on the RatingComponent
. This sets the template
on the RatingComponent
as expected, and the stars displayed are updated.
I also have an EmployeePage
that has a RatingComponent
.
EmployeePage.ts:
import { Component } from '@angular/core'; import { NavController, NavParams } from 'ionic-angular'; import { EmployeeModel } from '../model/employeeModel'; import { RatingComponent } from '../utils/rating/RatingComponent';
@Component({ templateUrl: 'build/pages/employee/employee.html', providers: [RatingComponent], directives: [RatingComponent] }) export class EmployeePage {
private employeeModel: EmployeeModel = null; private ratingComponent: RatingComponent;
constructor(private navController: NavController, private navParams: NavParams, ratingComponent: RatingComponent) { this.employeeModel = navParams.get('employeeModel'); this.ratingComponent = ratingComponent; }
updateRating(event: Event) { alert(event.timeStamp); this.employeeModel.averageRating = this.ratingComponent.score; this.ratingComponent.update(this.ratingComponent.score); } }
I have an html that places the <rating>
tag on the page.
employee.html:
<rating score="{{employeeModel.averageRating}}" max="5" (click)="updateRating($event)"></rating>
<br>Rating: <b>{{employeeModel.averageRating}}</b>
When the user clicks on the stars to update he raitng, the RatingComponent
ās update
function is called, but now I also need to update my model object with the new star rating (employeeModel.averageRating
).
I donāt want the RatingComponent
to have any reference to the EmployeePage
, because it needs to be loosely coupled. The EmployeePage
does have a RatingComponent
though.
I am not sure if my EmployeePage
implementation of its RatingComponent
is correct.
When the star is clicked I also call the updateRating
function on the EmployeePage
(via (click)="updateRating($event)"
), in order to update the model. I try update the model with the RatingComponent
ās new score
, but it does not get the new updated value, but always gets the default value of 1 (@Input() public score: number = 1;
).
It is as if there are two separate RatingComponent
objects. I can set one as desired, but when I want to reference the value set (score
), I can only get a returned default value.
My EmployeePage
has the RatingComponent
defined as a directive
in order to display the stars, and also as a provider
in order to get a handle on it, to get the new score
value.
@Component({ templateUrl: 'build/pages/employee/employee.html', providers: [RatingComponent], directives: [RatingComponent] })
I think this is where my problem lies. I think it is creating two separate RatingComponent
objects when I want to share the same object.
Can anyone please suggest a better way for me to handle this?
Thanks