fix(example): updated angular2 example

BioPhoton · Jan 30, 2017 · b89e3aa · b89e3aa
1 parent 94ad8b6
commit b89e3aa
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 13 deletions.
diff --git a/examples/test/app/common/star-rating/star-rating-struct.ts b/examples/test/app/common/star-rating/star-rating-struct.ts
@@ -24,13 +24,13 @@ export interface IStarRatingCompBindings {
   getColor?(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors;
   //Outputs (& bindings)
   onClick?: ($event: any) =>  IStarRatingOnClickEvent;
-  onUpdate?: ($event: any) => IStarRatingOnUpdateEvent;
+  onUpdate?: ($event: any) => IStarRatingOnRatingChangeEvent;
 }
 
 export interface IStarRatingOnClickEvent {
   rating: number;
 }
 
-export interface IStarRatingOnUpdateEvent {
+export interface IStarRatingOnRatingChangeEvent {
   rating: number;
 }
diff --git a/examples/test/app/common/star-rating/star-rating.component.ts b/examples/test/app/common/star-rating/star-rating.component.ts
@@ -7,7 +7,7 @@ import {
   starRatingStarSpace,
   starRatingStarTypes,
   IStarRatingOnClickEvent,
-  IStarRatingOnUpdateEvent
+  IStarRatingOnRatingChangeEvent
 } from "./star-rating-struct";
 import {StarRatingConfig} from "./star-rating-config";
 
@@ -306,9 +306,9 @@ export class StarRatingComponent implements OnInit, OnChanges {
     this.setColor();
 
 
-    //fire onUpdate event
-    let $event: IStarRatingOnUpdateEvent = {rating: this._rating};
-    //this.onUpdate.emit($event);
+    //fire onRatingChange event
+    let $event: IStarRatingOnRatingChangeEvent = {rating: this._rating};
+    this.onRatingChange.emit($event);
   }
 
 
@@ -348,10 +348,10 @@ export class StarRatingComponent implements OnInit, OnChanges {
   //Output
   ///////////////////////////////////////////////////////////////////////////////////////////
   @Output()
-  onClick: EventEmitter<IStarRatingOnClickEvent>;
+  onClick: EventEmitter<IStarRatingOnClickEvent> = new EventEmitter<IStarRatingOnClickEvent>();
 
   @Output()
-  onUpdate: EventEmitter<IStarRatingOnUpdateEvent>;
+  onRatingChange: EventEmitter<IStarRatingOnRatingChangeEvent> = new EventEmitter<IStarRatingOnRatingChangeEvent>();
 
   //CTRL ONLY
   ///////////////////////////////////////////////////////////////////////////////////////////
@@ -369,7 +369,7 @@ export class StarRatingComponent implements OnInit, OnChanges {
   halfStarVisible: boolean;
 
   constructor(protected config: StarRatingConfig) {
-    console.log('config: ', config);
+
     //set default ctrl props
     this.classEmpty = config.classEmpty;
     this.classHalf = config.classHalf;
@@ -379,11 +379,11 @@ export class StarRatingComponent implements OnInit, OnChanges {
     this.pathFilled = config.svgPathFilled;
 
     //set default Component Inputs
-    if ('getColor' in config) {
+    if ('getColor' in config && typeof config.getColor === "function") {
       this.getColor = config.getColor;
     }
 
-    if ('getHalfStarVisible' in config) {
+    if ('getHalfStarVisible' in config && typeof config.getHalfStarVisible === "function") {
       this.getHalfStarVisible = config.getHalfStarVisible;
     }
 
@@ -441,6 +441,11 @@ export class StarRatingComponent implements OnInit, OnChanges {
 
     this.rating = rating;
 
+    let onClickEventObject:IStarRatingOnClickEvent = {
+      rating:this.rating
+    };
+    this.onClick.emit(onClickEventObject);
+
   }
 
   ngOnInit() {

diff --git a/examples/test/app/component/start/start.component.html b/examples/test/app/component/start/start.component.html
@@ -1,3 +1,4 @@
 <h1>Start</h1>
-<star-rating-comp></star-rating-comp>
+<star-rating-comp (onClick)="onClick($event)" (onRatingChange)="onRatingChange($event)"></star-rating-comp>
+
 <dynamic-form [questions]="questions"></dynamic-form>
diff --git a/examples/test/app/component/start/start.component.ts b/examples/test/app/component/start/start.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit, Input, Output, OnChanges, EventEmitter } from '@angular/core';
 import {ItemService} from "./item.service";
+import {IStarRatingOnClickEvent} from "angular-star-rating/src/star-rating-struct";
 
 @Component({
   moduleId: module.id,
@@ -15,10 +16,16 @@ export class StartComponent implements OnInit, OnChanges {
   }
 
   ngOnInit() {
-
   }
 
   ngOnChanges() {
+  }
+
+  onClick($event:IStarRatingOnClickEvent) {
+    console.log('onClick $event', $event);
+  }
 
+  onRatingChange($event:IStarRatingOnClickEvent) {
+    console.log('onRatingChange $event', $event);
   }
 }