attempt: creating star review

package.json

@@ -27,6 +27,9 @@
     "core-js": "^2.5.4",
     "firebase": "^7.5.2",
     "firebase-import": "^2.2.0",
+    "ionic4-rating": "^1.0.9",
+    "ionic4-star-rating": "^1.1.1",
+    "ng-starrating": "^1.0.11",
     "rxjs": "~6.5.1",
     "tslib": "^1.9.0",
     "xml2json": "^0.11.2",

src/app/app.component.ts

@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { Platform } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { StarRatingComponent } from 'ng-starrating';
 
 @Component({
   selector: 'app-root',
@@ -24,4 +25,11 @@ export class AppComponent {
       this.splashScreen.hide();
     });
   }
+
+  onRate($event:{oldValue:number, newValue:number, starRating:StarRatingComponent}) {
+    alert(`Old Value:${$event.oldValue}, 
+      New Value: ${$event.newValue}, 
+      Checked Color: ${$event.starRating.checkedcolor}, 
+      Unchecked Color: ${$event.starRating.uncheckedcolor}`);
+  }
 }

src/app/app.module.ts

@@ -11,6 +11,7 @@ import  firebaseConfig  from './firebase';
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { RatingModule } from 'ng-starrating'
 
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
@@ -29,7 +30,8 @@ import { TransformProvider } from './providers/transform';
     AngularFireModule.initializeApp(firebaseConfig),
     AngularFireAuthModule,
     AngularFirestoreModule,
-    HttpClientModule
+    HttpClientModule,
+    RatingModule,
   ],
   providers: [
     StatusBar,

src/app/review/review.module.ts

@@ -7,13 +7,15 @@ import { IonicModule } from '@ionic/angular';
 import { ReviewPageRoutingModule } from './review-routing.module';
 
 import { ReviewPage } from './review.page';
+import { StarRatingModule } from 'ionic4-star-rating'
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
-    ReviewPageRoutingModule
+    ReviewPageRoutingModule,
+    StarRatingModule,
   ],
   declarations: [ReviewPage]
 })

src/app/review/review.page.html

@@ -8,13 +8,9 @@
   <h1 class="title" style="color: white;">Rate</h1>
   <h1 class="title" style="color: white;">This</h1>
   <h1 class="title" style="color: white;">Game</h1>
-  <div class="star-flex">
-    <ion-icon name="star" color="warning" size="large"></ion-icon>
-    <ion-icon name="star" color="warning" size="large"></ion-icon>
-    <ion-icon name="star" color="warning" size="large"></ion-icon>
-    <ion-icon name="star" color="warning" size="large"></ion-icon>
-    <ion-icon name="star" color="warning" size="large"></ion-icon>
-  </div>
+  <ion-item>
+    <star-rating [value]='rating' size='24px' (rate)='updateStar($event)' readonly='false' checkedcolor='gold' uncheckedcolor='#c4c4c4'></star-rating>
+  </ion-item>
   <ion-card class="card">
     <ion-card-header>
       <ion-icon name="create" size="large"></ion-icon>

src/app/review/review.page.scss

@@ -39,6 +39,15 @@ ion-content{
     // height: 100%;
     background-color: white; 
 }
+.rating {
+    ion-icon {
+      color: gray;
+
+      &.filled {
+        color: #ffb400;
+      }
+    }
+  }
 
 // ::-webkit-scrollbar {
 //     width: 0px;  /* Remove scrollbar space */

src/app/review/review.page.ts

@@ -1,7 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChildren } from '@angular/core';
 import { AngularFirestore } from '@angular/fire/firestore';
 import { UserService } from '../user.service';
 import { HttpClientModule } from '@angular/common/http';
+import { StarRatingComponent } from 'ng-starrating';
+import { Observable } from 'rxjs'
 
 @Component({
   selector: 'app-review',
@@ -13,31 +15,38 @@ export class ReviewPage implements OnInit {
   comment: string
   players: number
   time: number
+  rating: string = '5';
 
   constructor(
     public afstore: AngularFirestore,
     public user: UserService,
-    public http: HttpClientModule
+    public http: HttpClientModule,
   ) { }
 
   ngOnInit() {
   }
 
-  createPost(){
+  async addReview(){
     const comment = this.comment
     const players = this.players
     const time = this.time
     const uid = this.user.getUID()
+    const rate = this.rating
     console.log(comment,players,time,uid)
     this.afstore.collection("review").add({
         feedback: comment,
         group: players,
         duration: time,
         user: uid,
         gameid: "123456",
-        rating: 5
+        rating: rate
 
     })
   }
 
+  updateStar($event:{oldValue:number, newValue:number, starRating:StarRatingComponent}) {
+    this.rating=$event.newValue.toString();
+    console.log(this.rating)
+  }
+
 }

src/app/tabs/tabs.module.ts

@@ -7,7 +7,6 @@ import { IonicModule } from '@ionic/angular';
 import { TabsPageRoutingModule } from './tabs-routing.module';
 
 import { TabsPage } from './tabs.page';
-
 @NgModule({
   imports: [
     CommonModule,