Refactored to use setter instead of differs

NehalDamania · Apr 26, 2017 · a00dfa1 · a00dfa1
1 parent 8d122cb
commit a00dfa1
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 27 deletions.
diff --git a/components/carousel/carousel.ts b/components/carousel/carousel.ts
@@ -1,4 +1,4 @@
-import {NgModule,Component,ElementRef,OnInit,AfterViewInit,AfterViewChecked,AfterContentInit,EventEmitter,DoCheck,OnDestroy,Input,Output,IterableDiffers,TemplateRef,ContentChildren,QueryList,Renderer} from '@angular/core';
+import {NgModule,Component,ElementRef,OnInit,AfterViewInit,AfterViewChecked,AfterContentInit,EventEmitter,OnDestroy,Input,Output,TemplateRef,ContentChildren,QueryList,Renderer} from '@angular/core';
 import {DomHandler} from '../dom/domhandler';
 import {SharedModule,PrimeTemplate} from '../common/shared';
 import {CommonModule} from '@angular/common';
@@ -36,10 +36,8 @@ import {CommonModule} from '@angular/common';
     `,
     providers: [DomHandler]
 })
-export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,DoCheck,OnDestroy{
+export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,OnDestroy{
 
-    @Input() value: any[];
-
     @Input() numVisible: number = 3;
 
     @Input() firstVisible: number = 0;
@@ -68,6 +66,8 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,DoCheck,O
 
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
+    public _value: any[];
+
     public itemTemplate: TemplateRef<any>;
 
     public container: any;    
@@ -100,8 +100,8 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,DoCheck,O
 
     differ: any;
 
-    constructor(public el: ElementRef, public domHandler: DomHandler, differs: IterableDiffers, public renderer: Renderer) {
-        this.differ = differs.find([]).create(null);
+    constructor(public el: ElementRef, public domHandler: DomHandler, public renderer: Renderer) {
+
     }
 
     ngAfterContentInit() {
@@ -118,31 +118,36 @@ export class Carousel implements OnInit,AfterViewChecked,AfterViewInit,DoCheck,O
         });
     }
 
-    ngDoCheck() {
-        let changes = this.differ.diff(this.value);
-
-        if(changes) {
-            if(this.value && this.value.length) {
-                if(this.value.length && this.firstVisible >= this.value.length) {
-                    this.setPage(this.totalPages - 1);
-                }
-            }
-            else {
-                this.setPage(0);
-            }
+    @Input() get value(): any[] {
+        return this._value;
+    }
 
-            this.valuesChanged = true;
-
-            if(this.autoplayInterval) {
-                this.stopAutoplay();
+    set value(val:any[]) {
+        this._value = val;
+        this.handleDataChange();
+    }
+
+    handleDataChange() {
+        if(this.value && this.value.length) {
+            if(this.value.length && this.firstVisible >= this.value.length) {
+                this.setPage(this.totalPages - 1);
             }
-
-            this.updateMobileDropdown();
-            this.updateLinks();
-            this.updateDropdown();
         }
+        else {
+            this.setPage(0);
+        }
+
+        this.valuesChanged = true;
+
+        if(this.autoplayInterval) {
+            this.stopAutoplay();
+        }
+
+        this.updateMobileDropdown();
+        this.updateLinks();
+        this.updateDropdown();
     }
-
+        
     ngAfterViewChecked() {
         if(this.valuesChanged) {
             this.render();

diff --git a/showcase/demo/carousel/carouseldemo.html b/showcase/demo/carousel/carouseldemo.html
@@ -59,6 +59,12 @@ <h3>Getting Started</h3>
 &lt;/p-carousel&gt;
 </code>
 </pre>
+
+            <h3>Managing Data</h3>
+            <p>DataTable uses setter based checking to realize if the underlying data has changed to update the UI so your data changes such as adding or removing a record 
+                should always create a new array reference instead of manipulating an existing array. For example, use slice instead of splice when removing an item 
+                or use spread operator instead of push method when adding an item.</p>
+
             <h3>Limiting Visible Items</h3>
             <p>Default number of visible items is 3, use numVisible option to customize this.</p>
 <pre>