diff --git a/components/carousel/carousel.ts b/components/carousel/carousel.ts index 0aa7cbee3f2..2430a43bbcf 100644 --- 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; + public _value: any[]; + public itemTemplate: TemplateRef; 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 index 8de20a65d3f..0b3ac7e6440 100644 --- a/showcase/demo/carousel/carouseldemo.html +++ b/showcase/demo/carousel/carouseldemo.html @@ -59,6 +59,12 @@

Getting Started

</p-carousel> + +

Managing Data

+

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.

+

Limiting Visible Items

Default number of visible items is 3, use numVisible option to customize this.