Feature/sale indicator on Products

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}",
+            "sourceMaps": true,
+            "preLaunchTask": "start"
+        },
+        {
+            "type": "msedge",
+            "request": "launch",
+            "name": "Launch Edge against localhost",
+            "url": "http://localhost:4200",
+            "webRoot": "${workspaceFolder}",
+            "sourceMaps": true,
+            "preLaunchTask": "start"
+        }
+    ]
+}

.vscode/tasks.json

@@ -0,0 +1,34 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "start",
+			"type": "npm",
+			"script": "start",
+			"isBackground": true,
+			"presentation": {
+				"focus": true,
+				"panel": "dedicated"
+			},
+			"problemMatcher": {
+				"owner": "typescript",
+				"source": "ts",
+				"applyTo": "closedDocuments",
+				"fileLocation": [
+					"relative",
+					"${cwd}"
+				],
+				"pattern": "$tsc",
+				"background": {
+					"activeOnStart": true,
+					"beginsPattern": {
+						"regexp": "(.*?)"
+					},
+					"endsPattern": {
+						"regexp": "Compiled |Failed to compile."
+					}
+				}
+			}
+		}
+	]
+}

src/app/product-list/product-list.component.css

@@ -0,0 +1,8 @@
+.strike-through {
+    text-decoration: line-through;
+}
+
+.my-7 {
+    margin-top: 0.02%;
+    margin-bottom: 14px;
+}

src/app/product-list/product-list.component.html

@@ -14,6 +14,23 @@ <h3>
     Description: {{ product.description }}
   </p>
 
+  <div *ngIf="product.onSale; else normalPrice" class="my-7">
+    <p>
+      <span>Was: </span>
+      <span class="strike-through"> {{ product.originalPrice | currency }} </span>
+    </p>
+    <div>
+      <span>Now: </span>
+      <span> {{ product.price | currency }} </span>
+    </div>
+  </div>
+
+  <ng-template #normalPrice>
+    <p>
+      Price: {{ product.price | currency }}
+    </p>
+  </ng-template>
+
   <button type="button" (click)="share()">
     Share
   </button>

src/app/product-list/product-list.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import { products } from '../products';
+import { Product, products } from '../products';
 
 @Component({
   selector: 'app-product-list',
@@ -9,7 +9,7 @@ import { products } from '../products';
 })
 export class ProductListComponent {
 
-  products = [...products];
+  products: Product[] = [...products];
 
   share() {
     window.alert('The product has been shared!');

src/app/products.ts

@@ -3,25 +3,31 @@ export interface Product {
   name: string;
   price: number;
   description: string;
+  onSale: boolean;
+  originalPrice?: number;
 }
 
 export const products: Product[] = [
   {
     id: 1,
     name: 'Phone XL',
     price: 799,
-    description: 'A large phone with one of the best screens'
+    description: 'A large phone with one of the best screens',
+    onSale: false
   },
   {
     id: 2,
     name: 'Phone Mini',
     price: 699,
-    description: 'A great phone with one of the best cameras'
+    description: 'A great phone with one of the best cameras',
+    onSale: false
   },
   {
     id: 3,
     name: 'Phone Standard',
     price: 299,
-    description: ''
+    description: '',
+    onSale: true,
+    originalPrice: 500
   }
 ];