fix(tabset): rename change event to avoid conflicts with native ones

BREAKING CHANGE: the `change` event on the tabset level was renamed to `tabChange`. Before: `<ngb-tabset (change)="...">` after: `<ngb-tabset (tabChange)="...">` Fixes #741 Closes #747
ng-bootstrap · Sep 16, 2016 · 9d2754f · 9d2754f
1 parent 4f5867c
commit 9d2754f
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/demo/src/app/components/tabset/demos/preventchange/tabset-preventchange.html b/demo/src/app/components/tabset/demos/preventchange/tabset-preventchange.html
@@ -1,4 +1,4 @@
-<ngb-tabset  (change)="beforeChange($event)">
+<ngb-tabset  (tabChange)="beforeChange($event)">
   <ngb-tab title="Simple" id="foo">
     <template ngbTabContent>
       <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth

diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -272,7 +272,7 @@ describe('ngb-tabset', () => {
 
   it('should emit tab change event when switching tabs', () => {
     const fixture = createTestComponent(`
-          <ngb-tabset #myTabSet="ngbTabset" (change)="changeCallback($event)">
+          <ngb-tabset #myTabSet="ngbTabset" (tabChange)="changeCallback($event)">
             <ngb-tab id="first" title="first"><template ngbTabContent>First</template></ngb-tab>
             <ngb-tab id="second" title="second"><template ngbTabContent>Second</template></ngb-tab>
           </ngb-tabset>
@@ -299,7 +299,7 @@ describe('ngb-tabset', () => {
 
   it('should not emit tab change event when selecting currently active and disabled tabs', () => {
     const fixture = createTestComponent(`
-          <ngb-tabset #myTabSet="ngbTabset" (change)="changeCallback($event)">
+          <ngb-tabset #myTabSet="ngbTabset" (tabChange)="changeCallback($event)">
             <ngb-tab id="first" title="first"><template ngbTabContent>First</template></ngb-tab>
             <ngb-tab id="second" title="second" [disabled]="true"><template ngbTabContent>Second</template></ngb-tab>
           </ngb-tabset>
@@ -324,7 +324,7 @@ describe('ngb-tabset', () => {
 
   it('should cancel tab change when preventDefault() is called', () => {
     const fixture = createTestComponent(`
-          <ngb-tabset #myTabSet="ngbTabset" (change)="changeCallback($event)">
+          <ngb-tabset #myTabSet="ngbTabset" (tabChange)="changeCallback($event)">
             <ngb-tab id="first" title="first"><template ngbTabContent>First</template></ngb-tab>
             <ngb-tab id="second" title="second"><template ngbTabContent>Second</template></ngb-tab>
           </ngb-tabset>

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -112,7 +112,7 @@ export class NgbTabset implements AfterContentChecked {
   /**
    * A tab change event fired right before the tab selection happens. See NgbTabChangeEvent for payload details
    */
-  @Output() change = new EventEmitter<NgbTabChangeEvent>();
+  @Output() tabChange = new EventEmitter<NgbTabChangeEvent>();
 
   constructor(config: NgbTabsetConfig) { this.type = config.type; }
 
@@ -125,7 +125,7 @@ export class NgbTabset implements AfterContentChecked {
     if (selectedTab && !selectedTab.disabled && this.activeId !== selectedTab.id) {
       let defaultPrevented = false;
 
-      this.change.emit(
+      this.tabChange.emit(
           {activeId: this.activeId, nextId: selectedTab.id, preventDefault: () => { defaultPrevented = true; }});
 
       if (!defaultPrevented) {