add product and products as html template

projects/web/src/componets/product.html

@@ -0,0 +1,13 @@
+<div class="product-item" routerLink="/shops/{{product.shop.projectId}}"
+    [queryParams]="{product:product.product}">
+    <img *ngIf="!noImage" (error)="hideImage()" [src]="product.images[0]" alt="{{product.product}}" />
+    <div [class]="!noImage?'product-item-detail':'product-item-detail-no-image'">
+        <p [style]="noImage?{color: '#f5f5f5'}:{}" class="product-item-detail-category">{{product.product}}</p>
+        <p [style]="noImage?{color: 'white'}:{}" class="product-item-detail-price">{{product.retailPrice | currency:
+            'TZS '}}</p>
+    </div>
+    <a routerLink="/shops/{{product.shop.projectId}}" [queryParams]="{product:product.product}"
+        class="product-item-detail-link">
+        by {{product.shop.businessName}}
+    </a>
+</div>

projects/web/src/componets/products.html

@@ -0,0 +1,15 @@
+<div infiniteScroll [infiniteScrollDistance]="5" [infiniteScrollThrottle]="50" [scrollWindow]="false"
+    (scrolled)="onScroll()" class="products-container">
+    <app-join-promotion></app-join-promotion>
+    <div class="products-container">
+        <app-product [product]="product" *ngFor="let product of mallState.products | async"></app-product>
+    </div>
+    <div *ngIf="showLoadMore" class="load-more">
+        <button (click)="onScroll()" mat-button color="primary" *ngIf="(mallState.loadProducts  |async) === false">
+            Load More
+        </button>
+        <mat-progress-spinner *ngIf="(mallState.loadProducts  | async) === true" [diameter]="20" color="primary"
+            mode="indeterminate">
+        </mat-progress-spinner>
+    </div>
+</div>