Resolve conflict occurred when two or more pagination components are present in the same page

src/app/shared/pagination/pagination.component.ts

@@ -225,10 +225,14 @@ export class PaginationComponent implements OnDestroy, OnInit {
   }
 
   /**
+   * @param cdRef
+   *    ChangeDetectorRef is a singleton service provided by Angular.
    * @param route
    *    Route is a singleton service provided by Angular.
    * @param router
    *    Router is a singleton service provided by Angular.
+   * @param hostWindowService
+   *    the HostWindowService singleton.
    */
   constructor(private cdRef: ChangeDetectorRef,
               private route: ActivatedRoute,
@@ -243,7 +247,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    *    The page being navigated to.
    */
   public doPageChange(page: number) {
-    this.updateRoute({ page: page.toString() });
+    this.updateRoute({ pageId: this.id, page: page.toString() });
   }
 
   /**
@@ -253,7 +257,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    *    The page size being navigated to.
    */
   public doPageSizeChange(pageSize: number) {
-    this.updateRoute({ page: 1, pageSize: pageSize });
+    this.updateRoute({ pageId: this.id, page: 1, pageSize: pageSize });
   }
 
   /**
@@ -263,7 +267,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    *    The sort direction being navigated to.
    */
   public doSortDirectionChange(sortDirection: SortDirection) {
-    this.updateRoute({ page: 1, sortDirection: sortDirection });
+    this.updateRoute({ pageId: this.id, page: 1, sortDirection: sortDirection });
   }
 
   /**
@@ -273,7 +277,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    *    The sort field being navigated to.
    */
   public doSortFieldChange(field: string) {
-    this.updateRoute({ page: 1, sortField: field });
+    this.updateRoute({ pageId: this.id, page: 1, sortField: field });
   }
 
   /**
@@ -413,27 +417,30 @@ export class PaginationComponent implements OnDestroy, OnInit {
    * Method to update all pagination variables to the current query parameters
    */
   private setFields() {
-    // (+) converts string to a number
-    const page = this.currentQueryParams.page;
-    if (this.currentPage !== +page) {
-      this.setPage(+page);
-    }
+    // set fields only when page id is the one configured for this pagination instance
+    if (this.currentQueryParams.pageId === this.id) {
+      // (+) converts string to a number
+      const page = this.currentQueryParams.page;
+      if (this.currentPage !== +page) {
+        this.setPage(+page);
+      }
 
-    const pageSize = this.currentQueryParams.pageSize;
-    if (this.pageSize !== +pageSize) {
-      this.setPageSize(+pageSize);
-    }
+      const pageSize = this.currentQueryParams.pageSize;
+      if (this.pageSize !== +pageSize) {
+        this.setPageSize(+pageSize);
+      }
 
-    const sortDirection = this.currentQueryParams.sortDirection;
-    if (this.sortDirection !== sortDirection) {
-      this.setSortDirection(sortDirection);
-    }
+      const sortDirection = this.currentQueryParams.sortDirection;
+      if (this.sortDirection !== sortDirection) {
+        this.setSortDirection(sortDirection);
+      }
 
-    const sortField = this.currentQueryParams.sortField;
-    if (this.sortField !== sortField) {
-      this.setSortField(sortField);
+      const sortField = this.currentQueryParams.sortField;
+      if (this.sortField !== sortField) {
+        this.setSortField(sortField);
+      }
+      this.cdRef.detectChanges();
     }
-    this.cdRef.detectChanges();
   }
 
   /**