From e907dbc4d36ce4b82ca60a2bc652d190c8bc44a5 Mon Sep 17 00:00:00 2001
From: Pavlo Ostrozhynskyi <ikolochko22@gmail.com>
Date: Mon, 4 Jul 2022 16:45:23 +0300
Subject: [PATCH 1/2] fixed

---
 .../components/paginator/paginator.component.html   | 13 +++++++------
 .../components/paginator/paginator.component.ts     |  3 ++-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/app/shared/components/paginator/paginator.component.html b/src/app/shared/components/paginator/paginator.component.html
index 845651be1a..2b32401eee 100644
--- a/src/app/shared/components/paginator/paginator.component.html
+++ b/src/app/shared/components/paginator/paginator.component.html
@@ -13,10 +13,11 @@
   </div>
 
   <label class="step-label">Відображати на сторінці:</label>
-  <mat-select disableOptionCentering panelClass="dropdown-panel" class="step-input" (selectionChange)="OnSelectOption($event)" placeholder="{{itemsPerPage}}">
-    <mat-option value="8" class="dropdown-option"> 8 </mat-option>
-    <mat-option value="12" selected class="dropdown-option"> 12 </mat-option>
-    <mat-option value="16" class="dropdown-option"> 16 </mat-option>
-    <mat-option value="20" class="dropdown-option"> 20 </mat-option>
-  </mat-select>
+    <mat-select [(value)]="itemsPerPage" disableOptionCentering panelClass=“dropdown-panel” class="step-input" (selectionChange)="OnSelectOption($event)" placeholder="{{itemsPerPage}}">
+      <mat-option *ngFor="let value of listOfValues" 
+                  [style.background]="value === itemsPerPage ? 'rgba(0,0,0,.04)' : 'auto'" 
+                  [value]="value"  
+                  class="dropdown-option">{{value}}
+      </mat-option>
+    </mat-select>
 </div>
diff --git a/src/app/shared/components/paginator/paginator.component.ts b/src/app/shared/components/paginator/paginator.component.ts
index 4538ed59ca..23d0263e67 100644
--- a/src/app/shared/components/paginator/paginator.component.ts
+++ b/src/app/shared/components/paginator/paginator.component.ts
@@ -20,6 +20,7 @@ export class PaginatorComponent implements OnInit, OnChanges {
 
   carouselPageList: PaginationElement[] = [];
   totalPageAmount: number;
+  listOfValues: Array<Number> = [8, 12, 16, 20];
 
   constructor() { }
 
@@ -40,7 +41,7 @@ export class PaginatorComponent implements OnInit, OnChanges {
     }
     if (changes?.itemsPerPage) {
       if (!changes.itemsPerPage.isFirstChange()) {
-       this.ngOnInit();
+        this.ngOnInit();
       }
     }
   }

From 7e9bf6a551ed129d89f9ac4db91f171275b0b505 Mon Sep 17 00:00:00 2001
From: Pavlo Ostrozhynskyi <ikolochko22@gmail.com>
Date: Mon, 4 Jul 2022 19:10:22 +0300
Subject: [PATCH 2/2] fix

---
 .../shared/components/paginator/paginator.component.html    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/components/paginator/paginator.component.html b/src/app/shared/components/paginator/paginator.component.html
index 2b32401eee..3a42639fb4 100644
--- a/src/app/shared/components/paginator/paginator.component.html
+++ b/src/app/shared/components/paginator/paginator.component.html
@@ -15,9 +15,9 @@
   <label class="step-label">Відображати на сторінці:</label>
     <mat-select [(value)]="itemsPerPage" disableOptionCentering panelClass=“dropdown-panel” class="step-input" (selectionChange)="OnSelectOption($event)" placeholder="{{itemsPerPage}}">
       <mat-option *ngFor="let value of listOfValues" 
-                  [style.background]="value === itemsPerPage ? 'rgba(0,0,0,.04)' : 'auto'" 
-                  [value]="value"  
-                  class="dropdown-option">{{value}}
+        [style.background]="value === itemsPerPage ? 'rgba(0,0,0,.04)' : 'auto'"
+        [value]="value" 
+        class="dropdown-option">{{value}}
       </mat-option>
     </mat-select>
 </div>