From 5ab6852d4c2a46853bd916fb73bce617faa4567b Mon Sep 17 00:00:00 2001
From: Koosthzuien <>
Date: Wed, 23 Aug 2023 20:17:56 +0200
Subject: [PATCH 1/3] Added image as new property for product

---
 src/app/products.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/products.ts b/src/app/products.ts
index 4d99807..1bde85a 100644
--- a/src/app/products.ts
+++ b/src/app/products.ts
@@ -3,6 +3,7 @@ export interface Product {
   name: string;
   price: number;
   description: string;
+  image: string;
 }
 
 export const products: Product[] = [
@@ -10,18 +11,21 @@ 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',
+    image: "https://openmoji.org/data/color/svg/260E.svg"
   },
   {
     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',
+    image: "https://openmoji.org/data/color/svg/1F4DE.svg"
   },
   {
     id: 3,
     name: 'Phone Standard',
     price: 299,
-    description: ''
+    description: '',
+    image: "https://openmoji.org/data/color/svg/1F4F1.svg"
   }
 ];

From d2f93beb6af1a64c5d70851fd2b67c77d41a69e3 Mon Sep 17 00:00:00 2001
From: Koosthzuien <>
Date: Wed, 23 Aug 2023 20:18:26 +0200
Subject: [PATCH 2/3] Used new image property to render images of products

---
 src/app/product-list/product-list.component.css  | 12 ++++++++++++
 src/app/product-list/product-list.component.html | 10 ++++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/app/product-list/product-list.component.css b/src/app/product-list/product-list.component.css
index e69de29..746c739 100644
--- a/src/app/product-list/product-list.component.css
+++ b/src/app/product-list/product-list.component.css
@@ -0,0 +1,12 @@
+.flex {
+    display: flex;
+}
+
+.center {
+    align-items: center;
+}
+
+.image {
+    padding-left: 12px;
+    width: 30px;
+}
\ No newline at end of file
diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html
index b760f69..ff5f698 100644
--- a/src/app/product-list/product-list.component.html
+++ b/src/app/product-list/product-list.component.html
@@ -2,14 +2,16 @@ <h2>Products</h2>
 
 <div *ngFor="let product of products">
 
-  <h3>
+  <h3 class="flex">
     <a
       [title]="product.name + ' details'"
-      [routerLink]="['/products', product.id]">
+      [routerLink]="['/products', product.id]"
+      class="flex center">
       {{ product.name }}
     </a>
+    <img [src]="product.image" class="image" />
   </h3>
-
+  
   <p *ngIf="product.description">
     Description: {{ product.description }}
   </p>
@@ -23,4 +25,4 @@ <h3>
     (notify)="onNotify()">
   </app-product-alerts>
 
-</div>
+</div>
\ No newline at end of file

From d9fd8cf5c541719cd0a1bdfbeabe46ba84dd52af Mon Sep 17 00:00:00 2001
From: Koosthzuien <>
Date: Wed, 23 Aug 2023 20:21:14 +0200
Subject: [PATCH 3/3] Added coming soon description

---
 src/app/product-list/product-list.component.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/product-list/product-list.component.html b/src/app/product-list/product-list.component.html
index ff5f698..3470b5c 100644
--- a/src/app/product-list/product-list.component.html
+++ b/src/app/product-list/product-list.component.html
@@ -12,6 +12,10 @@ <h3 class="flex">
     <img [src]="product.image" class="image" />
   </h3>
   
+  <p *ngIf="!product.description">
+    Description coming soon
+  </p>
+
   <p *ngIf="product.description">
     Description: {{ product.description }}
   </p>