fix(pagination): and pager to mark for check when page is changed (#2942

)
valor-software · Nov 2, 2017 · e225da7 · e225da7
1 parent 1d18dbb
commit e225da7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 17 deletions.
diff --git a/demo/src/app/components/+pagination/demos/basic/basic.ts b/demo/src/app/components/+pagination/demos/basic/basic.ts
@@ -1,13 +1,13 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'demo-pagination-basic',
   templateUrl: './basic.html'
 })
 export class DemoPaginationBasicComponent {
-  totalItems: number = 64;
-  currentPage: number = 4;
-  smallnumPages: number = 0;
+  totalItems = 64;
+  currentPage = 4;
+  smallnumPages = 0;
 
   setPage(pageNo: number): void {
     this.currentPage = pageNo;

diff --git a/src/pagination/pager.component.ts b/src/pagination/pager.component.ts
@@ -6,7 +6,7 @@ import {
   Input,
   Output,
   EventEmitter,
-  forwardRef
+  forwardRef, ChangeDetectorRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { PageChangedEvent } from './pagination.component';
@@ -97,6 +97,7 @@ export class PagerComponent implements ControlValueAccessor, OnInit {
   set page(value: number) {
     const _previous = this._page;
     this._page = value > this.totalPages ? this.totalPages : value || 1;
+    this.changeDetection.markForCheck();
 
     if (_previous === this._page || typeof _previous === 'undefined') {
       return;
@@ -115,9 +116,6 @@ export class PagerComponent implements ControlValueAccessor, OnInit {
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
 
-  renderer: Renderer2;
-  elementRef: ElementRef;
-
   classMap: string;
   pages: any[];
 
@@ -127,9 +125,10 @@ export class PagerComponent implements ControlValueAccessor, OnInit {
   protected inited = false;
   protected _page = 1;
 
-  constructor(renderer: Renderer2,
-              elementRef: ElementRef,
-              paginationConfig: PaginationConfig) {
+  constructor(private renderer: Renderer2,
+              private elementRef: ElementRef,
+              paginationConfig: PaginationConfig,
+              private changeDetection: ChangeDetectorRef) {
     this.renderer = renderer;
     this.elementRef = elementRef;
     if (!this.config) {

diff --git a/src/pagination/pagination.component.ts b/src/pagination/pagination.component.ts
@@ -6,7 +6,7 @@ import {
   OnInit,
   Output,
   Renderer2,
-  forwardRef
+  forwardRef, ChangeDetectorRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
@@ -102,6 +102,7 @@ export class PaginationComponent implements ControlValueAccessor, OnInit {
   set page(value: number) {
     const _previous = this._page;
     this._page = value > this.totalPages ? this.totalPages : value || 1;
+    this.changeDetection.markForCheck();
 
     if (_previous === this._page || typeof _previous === 'undefined') {
       return;
@@ -119,8 +120,7 @@ export class PaginationComponent implements ControlValueAccessor, OnInit {
 
   onChange: any = Function.prototype;
   onTouched: any = Function.prototype;
-  renderer: Renderer2;
-  elementRef: ElementRef;
+
   classMap: string;
   pages: any[];
 
@@ -131,9 +131,10 @@ export class PaginationComponent implements ControlValueAccessor, OnInit {
   protected _page = 1;
 
   constructor(
-    renderer: Renderer2,
-    elementRef: ElementRef,
-    paginationConfig: PaginationConfig
+    private renderer: Renderer2,
+    private elementRef: ElementRef,
+    paginationConfig: PaginationConfig,
+    private changeDetection: ChangeDetectorRef
   ) {
     this.renderer = renderer;
     this.elementRef = elementRef;