Fazendo estrelas moldaveis na table

Author: LuizCarlosVilela

package-lock.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "~9.1.9",
     "@angular/router": "~9.1.9",
     "bootstrap": "^4.5.0",
+    "font-awesome": "^4.7.0",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

package.json

@@ -1,3 +1,4 @@
+import { StarComponent } from './star/star.component';
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
@@ -9,7 +10,8 @@ import { CourseListComponent } from './courses/course-list.component';
 @NgModule({
   declarations: [
     AppComponent,
-    CourseListComponent
+    CourseListComponent,
+    StarComponent
   ],
   imports: [
     BrowserModule,

src/app/app.module.ts

@@ -15,12 +15,16 @@ <h2>Course List</h2>
 
     <tbody>
         <tr *ngFor=" let course of courses">
-            <td>{{ course.imageUrl }}</td>
+            <td> 
+                <img [src]="course.imageUrl" width="40" height="40" alt=""> 
+            </td>
             <td>{{ course.name }}</td>
             <td>{{ course.price }}</td>
             <td>{{ course.code }}</td>
             <td>{{ course.releaseDate }}</td>
-            <td>{{ course.rating }}</td>
+            <td>
+                <app-star [rating]="course.rating"></app-star>
+            </td>
             <td></td>
         </tr>
     </tbody>

src/app/courses/course-list.component.html

@@ -14,8 +14,8 @@ export class CourseListComponent implements OnInit {
         this.courses = [
             {
                 id: 1,
-                name: "Angula",
-                imageUrl: "",
+                name: "Angular",
+                imageUrl: "/assets/images/forms.png",
                 price: 99.99,
                 code: "XPS123",
                 duration: 120,
@@ -24,8 +24,8 @@ export class CourseListComponent implements OnInit {
             },
             {
                 id: 2,
-                name: "Angula",
-                imageUrl: "",
+                name: "Angular",
+                imageUrl: "/assets/images/http.png",
                 price: 99.99,
                 code: "XPS123",
                 duration: 120,

src/app/courses/course-list.component.ts

@@ -0,0 +1,3 @@
+.crop {
+    overflow: hidden;
+}

src/app/star/star.component.css

@@ -0,0 +1,9 @@
+<div class="crop" [style.width.px]="starWidth" [title]="rating">
+    <div style="width: 100px;">
+        <span class="fa fa-star"></span>
+        <span class="fa fa-star"></span>
+        <span class="fa fa-star"></span>
+        <span class="fa fa-star"></span>
+        <span class="fa fa-star"></span>
+    </div>
+</div>

src/app/star/star.component.html

@@ -0,0 +1,20 @@
+import { Component, OnChanges, Input } from '@angular/core';
+
+@Component({
+    selector: "app-star",
+    templateUrl: "./star.component.html",
+    styleUrls: ["./star.component.css"]
+})
+
+export class StarComponent implements OnChanges {
+
+    @Input()
+
+    rating: number = 0;
+    starWidth: number;
+
+    ngOnChanges(): void {
+        this.starWidth = this.rating * 74 / 5;
+    }
+
+}