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..3470b5c 100644
--- a/src/app/product-list/product-list.component.html
+++ b/src/app/product-list/product-list.component.html
@@ -2,13 +2,19 @@
Products
-
+ Description coming soon
+
Description: {{ product.description }}
@@ -23,4 +29,4 @@
(notify)="onNotify()">
-
+
\ No newline at end of file
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"
}
];