Add pagination

src/app/store/store.component.html

@@ -25,6 +25,22 @@ <h4>
                 </h4>
                 <div class="card-text bg-white p-1">{{product.description}}</div>
             </div>
+            <div class="form-inline float-start mr-1">
+                <select class="form-control" [value]="productsPerPage" (change)="changePageSize($event.target.value)">
+                    <option value="3">3 per Page</option>
+                    <option value="4">4 per Page</option>
+                    <option value="6">6 per Page</option>
+                    <option value="8">8 per Page</option>
+                </select>
+            </div>
+            <div class="btn-group float-end">
+                <button *ngFor="let page of pageNumbers" 
+                (click)="changePage(page)" 
+                class="btn btn-outline-primary"
+                [class.active]="page == selectedPage">
+                    {{page}}
+                </button>
+            </div>
         </div>
     </div>
 </div>

src/app/store/store.component.ts

@@ -10,11 +10,14 @@ import { ProductRepository } from "../model/product.repository";
 export class StoreComponent {
 
     public selectedCategory: string = null;
+    public productsPerPage = 4;
+    public selectedPage = 1;
 
     constructor(private repository: ProductRepository) {}
 
     get products(): Product[] {
-        return this.repository.getProducts(this.selectedCategory);
+        let pageIndex = (this.selectedPage - 1) * this.productsPerPage;
+        return this.repository.getProducts(this.selectedCategory).slice(pageIndex, pageIndex + this.productsPerPage);
     }
 
     get categories(): string[] {
@@ -25,4 +28,17 @@ export class StoreComponent {
         this.selectedCategory = newCategory;
     }
 
+    changePage(newPage: number) {
+        this.selectedPage = newPage;
+    }
+
+    changePageSize(newSize: number) {
+        this.productsPerPage = newSize;
+        this.changePage(1);
+    }
+
+    get pageNumbers(): number[] {
+        return Array(Math.ceil(this.repository.getProducts(this.selectedCategory).length / this.productsPerPage)).fill(0).map((x,i) => i+1);
+    }
+
 }

tsconfig.json

@@ -28,6 +28,7 @@
     "enableI18nLegacyMessageIdFormat": false,
     "strictInjectionParameters": true,
     "strictInputAccessModifiers": true,
-    "strictTemplates": true
+    "strictTemplates": true,
+    "strictDomEventTypes": false
   }
 }