fix(accordion): rename change event to avoid conflicts

BREAKING CHANGE: the `change` event on the accordion level was renamed to `panelChange`. Before: `<ngb-accordion (change)="...">` after: `<ngb-accordion (panelChange)="...">` Fixes #751 Closes #756
ng-bootstrap · Sep 17, 2016 · 21eb610 · 21eb610
1 parent 401fcfa
commit 21eb610
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/demo/src/app/components/accordion/demos/preventchange/accordion-preventchange.html b/demo/src/app/components/accordion/demos/preventchange/accordion-preventchange.html
@@ -1,4 +1,4 @@
-<ngb-accordion (change)="beforeChange($event)">
+<ngb-accordion (panelChange)="beforeChange($event)">
   <ngb-panel id="1" title="Simple">
     <template ngbPanelContent>
       Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia

diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -33,7 +33,7 @@ function expectOpenPanels(nativeEl: HTMLElement, openPanelsDef: boolean[]) {
 describe('ngb-accordion', () => {
   let html = `
     <ngb-accordion #acc="ngbAccordion" [closeOthers]="closeOthers" [activeIds]="activeIds"
-      (change)="changeCallback($event)" [type]="classType">
+      (panelChange)="changeCallback($event)" [type]="classType">
       <ngb-panel *ngFor="let panel of panels" [id]="panel.id" [disabled]="panel.disabled" [type]="panel.type">
         <template ngbPanelTitle>{{panel.title}}</template>
         <template ngbPanelContent>{{panel.content}}</template>

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -127,7 +127,7 @@ export class NgbAccordion implements AfterContentChecked {
   /**
    * A panel change event fired right before the panel toggle happens. See NgbPanelChangeEvent for payload details
    */
-  @Output() change = new EventEmitter<NgbPanelChangeEvent>();
+  @Output() panelChange = new EventEmitter<NgbPanelChangeEvent>();
 
   /**
    * A map that stores each panel state
@@ -154,7 +154,8 @@ export class NgbAccordion implements AfterContentChecked {
       const nextState = !this._states.get(panelId);
       let defaultPrevented = false;
 
-      this.change.emit({panelId: panelId, nextState: nextState, preventDefault: () => { defaultPrevented = true; }});
+      this.panelChange.emit(
+          {panelId: panelId, nextState: nextState, preventDefault: () => { defaultPrevented = true; }});
 
       if (!defaultPrevented) {
         this._states.set(panelId, nextState);