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

-

+

+ [routerLink]="['/products', product.id]" + class="flex center"> {{ product.name }} +

+ +

+ 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" } ];