chore(*): some changes to samples

Author: ChronosSF

src/app/data-entries/rating/rating-form/rating-form.component.html

@@ -12,8 +12,7 @@ <h4 igxCardHeaderTitle>{{ product.ProductName }}</h4>
             <igx-card-content>
                 <span igxCardHeaderSubtitle>Price: {{ product.UnitPrice | currency:'USD' }}</span>
                 <span igxCardHeaderSubtitle>
-                    User Rating: {{ (product.AverageRating + ((product.UserRating || product.AverageRating) - product.AverageRating) /
-                        (product.TotalReviews + 1)).toFixed(1) }} from {{ product.TotalReviews + (product.UserRating !== 0 ? 1 : 0) }} users
+                    User Rating: {{ productRating }} from {{ product.TotalReviews + (product.UserRating !== 0 ? 1 : 0) }} users
                 </span>
                 <igc-rating [(ngModel)]="product.UserRating" name="userRating"></igc-rating>
             </igx-card-content>

src/app/data-entries/rating/rating-form/rating-form.component.ts

@@ -22,4 +22,11 @@ export class RatingInFormComponent {
         OrderDate: new Date("2005-03-17"),
         icons: ['favorite', 'share']
     };
+
+    public get productRating(): string {
+        const rating = this.product.AverageRating +
+            ((this.product.UserRating || this.product.AverageRating) - this.product.AverageRating) /
+            (this.product.TotalReviews + 1);
+        return rating.toFixed(1);
+    }
 }

src/app/grid/grid-with-rating/grid-with-rating.component.html

@@ -3,9 +3,9 @@
         <igx-column [field]="'ProductName'"></igx-column>
         <igx-column [field]="'UnitsInStock'" [dataType]="'number'"></igx-column>
         <igx-column [field]="'UnitPrice'" [dataType]="'number'"></igx-column>
-        <igx-column [header]="'Rating'" [dataType]="'number'" width="250px">
-            <ng-template igxCell let-cell="cell">
-                <igc-rating value="0" min="0" max="5" (igcChange)="ratingChanged($event, cell.row);"></igc-rating>
+        <igx-column [field]="'Rating'" [dataType]="'number'" width="250px">
+            <ng-template igxCell let-cell="cell" let-val>
+                <igc-rating [value]="val" min="0" max="5" (igcChange)="ratingChanged($event, cell);"></igc-rating>
             </ng-template>
         </igx-column>
         <igx-column [field]="'OrderDate'" [dataType]="'date'"></igx-column>

src/app/grid/grid-with-rating/grid-with-rating.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { IgxGridRow, IgxToastComponent } from 'igniteui-angular';
+import { IgxGridRow, IgxToastComponent, IgxGridCell } from 'igniteui-angular';
+import { IgxCell } from 'igniteui-angular/lib/grids/common/crud.service';
 import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents';
 import { DATA } from '../../data/nwindData';
 
@@ -20,10 +21,12 @@ export class GridWithRatingComponent implements OnInit {
 
     public ngOnInit(): void {
         this.data = DATA;
+        this.data.map(r => r.Rating = Math.floor(Math.random() * 5) + 1)
     }
 
-    public ratingChanged(event: CustomEvent, row: IgxGridRow) {
-        this.message = `You rated ${row.data.ProductName} with score: ${event.detail}`;
+    public ratingChanged(event: CustomEvent, cell: IgxGridCell) {
+        cell.value = event.detail;
+        this.message = `You rated ${cell.row.data.ProductName} with score: ${event.detail}`;
         this.toast.open();
     }
 }