angular - ng2-bootstrap pagination pageChanged triggered multiple times -

i trying implement pagination in angular2 app ng2-bootrap. following http://valor-software.github.io/ng2-bootstrap/#pagination

my app.html

<div>     <div class="col-lg-12 text-right">         <pagination [totalitems]="totalitems" [itemsperpage]='2' (pagechanged)="pagechanged($event)" [(ngmodel)]="currentpage" [maxsize]="maxsize"         class="pagination-sm" [boundarylinks]="true"></pagination>     </div> </div> 

my component

import { component, view, inject} 'angular2/core'; import { core_directives } 'angular2/common'; import { pagination_components } 'ng2-bootstrap/ng2-bootstrap';  // webpack html imports @view({     templateurl: '/scripts/src/components/demo/demo.html',     directives: [pagination_components, core_directives] }) @component({     selector: 'tabs-demo', }) export class democomponent {     private totalitems: number = 64;     private currentpage: number = 4;      private maxsize: number = 5;     private bigtotalitems: number = 175;     private bigcurrentpage: number = 1;      private setpage(pageno: number): void {         this.currentpage = pageno;     };      private pagechanged(event: any): void {         console.log('page changed to: ' + event.page);         console.log('number items per page: ' + event.itemsperpage);     }; } 

its trigger pagechange event multiple time without clicking on pagination

the event triggered every time page property of component updated (this can done programmatically without interaction ui).

in fact, event triggered 3 times when initializing pagination component because of following:

• from nginit method. part of lifecycle of component.

  export class pagination implements controlvalueaccessor, oninit, ipaginationconfig, iattribute {   (...)    ngoninit() {     (...)     this.page = this.cd.value;     (...)   }    (...) } 

• from writevalue method. method called because component ngmodel-compliant. when expression associated in ngmodel updated, method called new value. during initialization, writevalue method called twice: first null value , 1 value.

  export class pagination implements controlvalueaccessor, oninit, ipaginationconfig, iattribute {   (...)    writevalue(value:number) {     this.page = value;     this.pages = this.getpages(this.page, this.totalpages);   }    (...) } 

that said, after initialization phase, pagechanged triggered once per page update.

edit

after having @ code of ng2-bootstrap, can't see how without updating code of pagination component.

here updates in class (file node_modules/ng2-bootstrap/components/pagination/pagination.ts):

• update set page block trigger events when inited property true:

  public set page(value) {   this._page = (value > this.totalpages) ? this.totalpages : (value || 1);    if (this.inited) { // <---------------     this.pagechanged.next({       page: this._page,       itemsperpage: this.itemsperpage     });   } } 

• update ngoninit method not set inited property true @ end:

  ngoninit() {   (...)   //this.inited = true; } 

• set inited property true @ end of first call of writevalue:

  writevalue(value:number) {   this.page = value;   this.pages = this.getpages(this.page, this.totalpages);    if (!this.inited) {     this.inited = true;   } } 

this way pagechanged event called once during pagination initialization phase.

hope helps you, thierry