Example of a merge conflict

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

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

@@ -2,13 +2,19 @@ <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 coming soon
+  </p>
 
   <p *ngIf="product.description">
     Description: {{ product.description }}
@@ -23,4 +29,4 @@ <h3>
     (notify)="onNotify()">
   </app-product-alerts>
 
-</div>
+</div>

src/app/products.ts

@@ -3,25 +3,29 @@ export interface Product {
   name: string;
   price: number;
   description: string;
+  image: string;
 }
 
 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"
   }
 ];