removed exra files and code. And Updated UI

.vs/ProjectSettings.json

@@ -0,0 +1,3 @@
+{
+  "CurrentProjectSetting": null
+}

.vs/VSWorkspaceState.json

@@ -0,0 +1,7 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\app"
+  ],
+  "PreviewInSolutionExplorer": false
+}

app/src/app/app.component.html

@@ -1,35 +1,29 @@
 <div class="container my-5">
   <div class="row">
     <div class="col">
-      <h1 class="mb-4">Products Table</h1>
-
+      <h1 class="mb-4">Products List</h1>
       <div class="input-group mb-3">
-        <input
-          type="text"
-          class="form-control"
-          placeholder="Search..."
-          (keyup)="search($event)"
-        />
+        <input type="text" class="form-control" placeholder="Search..." (keyup)="search($event)" />
       </div>
-
       <div class="card mb-3" *ngIf="products">
         <div class="card-body">
           <table class="table" style="table-layout: fixed">
             <thead>
               <tr>
-                <th scope="col">Id</th>
-                <th scope="col">Title</th>
-                <th scope="col">Description</th>
-                <th scope="col">Brand</th>
+                <th>Product Id</th>
+                <th>Title</th>
+                <th>Description</th>
+                <th>Brand</th>
+                <th>Display</th>
               </tr>
             </thead>
             <tbody>
               <tr *ngFor="let product of products; index as i">
-                <td>{{ i + 1 + (page - 1) * pageSize }}</td>
+                <td>{{ product.id }}</td>
                 <td>{{ product.title }}</td>
                 <td>{{ product.description }}</td>
                 <td>{{ product.brand }}</td>
-                <td><img src="{{ product.thumbnail }}" /></td>
+                <td><img [src]="product.thumbnail" class="img-fluid"/></td>
               </tr>
               <tr *ngIf="!products.length">
                 <td colspan="5" class="text-center p-5">No records found</td>
@@ -39,27 +33,18 @@ <h1 class="mb-4">Products Table</h1>
         </div>
       </div>
 
-      <div class="d-flex justify-content-between p-2">
-        <ngb-pagination
-          [collectionSize]="collectionSize"
-          [(page)]="page"
-          [pageSize]="pageSize"
-          (pageChange)="refreshProducts()"
-        >
+      <!-- Paging Start -->
+      <div class="d-flex justify-content-between pt-2 pb-5">
+        <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize"
+          (pageChange)="refreshProducts()">
         </ngb-pagination>
-        <select
-          class="form-select"
-          style="width: auto"
-          [(ngModel)]="pageSize"
-          (ngModelChange)="refreshProducts()"
-        >
+        <select class="form-select" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="refreshProducts()">
           <option [ngValue]="5">5 items per page</option>
           <option [ngValue]="10">10 items per page</option>
           <option [ngValue]="15">15 items per page</option>
         </select>
       </div>
+      <!-- Paging End -->
     </div>
   </div>
-</div>
-
-<router-outlet></router-outlet>
+</div>

app/src/app/app.component.scss

@@ -1,4 +0,0 @@
-img {
-  width: 100px;
-  height: 100px;
-}

app/src/app/app.component.ts

@@ -8,7 +8,6 @@ import { ProductsService } from 'src/services/products.service';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent implements OnInit {
-  title = 'app';
   products: Product[] = [];
   page = 1;
   collectionSize = 0;

app/src/models/product.ts

@@ -1,4 +1,5 @@
 export interface Product {
+  id: number;
   title: string;
   description: string;
   price: number;