diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts index 8999b60a83f8..7b3d06828a31 100644 --- a/src/lib/tabs/tab-body.ts +++ b/src/lib/tabs/tab-body.ts @@ -91,10 +91,10 @@ export class MatTabBody implements OnInit, AfterViewChecked { @ViewChild(PortalHostDirective) _portalHost: PortalHostDirective; /** Event emitted when the tab begins to animate towards the center as the active tab. */ - @Output() onCentering: EventEmitter = new EventEmitter(); + @Output() _onCentering: EventEmitter = new EventEmitter(); /** Event emitted when the tab completes its animation towards the center. */ - @Output() onCentered: EventEmitter = new EventEmitter(true); + @Output() _onCentered: EventEmitter = new EventEmitter(true); /** The tab body content to display. */ @Input('content') _content: TemplatePortal; @@ -151,7 +151,7 @@ export class MatTabBody implements OnInit, AfterViewChecked { _onTranslateTabStarted(e: AnimationEvent) { if (this._isCenterPosition(e.toState)) { - this.onCentering.emit(this._elementRef.nativeElement.clientHeight); + this._onCentering.emit(this._elementRef.nativeElement.clientHeight); } } @@ -163,7 +163,7 @@ export class MatTabBody implements OnInit, AfterViewChecked { // If the transition to the center is complete, emit an event. if (this._isCenterPosition(e.toState) && this._isCenterPosition(this._position)) { - this.onCentered.emit(); + this._onCentered.emit(); } } diff --git a/src/lib/tabs/tab-group.html b/src/lib/tabs/tab-group.html index baef20dfb1b8..da2d053b913d 100644 --- a/src/lib/tabs/tab-group.html +++ b/src/lib/tabs/tab-group.html @@ -33,7 +33,7 @@ [content]="tab.content" [position]="tab.position" [origin]="tab.origin" - (onCentered)="_removeTabBodyWrapperHeight()" - (onCentering)="_setTabBodyWrapperHeight($event)"> + (_onCentered)="_removeTabBodyWrapperHeight()" + (_onCentering)="_setTabBodyWrapperHeight($event)"> diff --git a/src/lib/tabs/tab-group.spec.ts b/src/lib/tabs/tab-group.spec.ts index f6c4668c0fb5..cf1f72a54711 100644 --- a/src/lib/tabs/tab-group.spec.ts +++ b/src/lib/tabs/tab-group.spec.ts @@ -412,7 +412,7 @@ describe('nested MatTabGroup with enabled animations', () => { [headerPosition]="headerPosition" [disableRipple]="disableRipple" (focusChange)="handleFocus($event)" - (selectChange)="handleSelection($event)"> + (selectedTabChange)="handleSelection($event)"> Tab One Tab one content @@ -448,7 +448,7 @@ class SimpleTabsTestApp { + (selectedTabChange)="handleSelection($event)"> {{tab.label}} {{tab.content}} diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts index 0d232cc2b3ed..d2726c5c4aa3 100644 --- a/src/lib/tabs/tab-group.ts +++ b/src/lib/tabs/tab-group.ts @@ -141,9 +141,15 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn @Output() focusChange: EventEmitter = new EventEmitter(); /** Event emitted when the tab selection has changed. */ - @Output() selectChange: EventEmitter = + @Output() selectedTabChange: EventEmitter = new EventEmitter(true); + /** + * Event emitted when the tab selection has changed. + * @deprecated Use `selectedTabChange` instead. + */ + @Output() selectChange: EventEmitter = this.selectedTabChange; + private _groupId: number; constructor(_renderer: Renderer2, @@ -170,7 +176,8 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn // If there is a change in selected index, emit a change event. Should not trigger if // the selected index has not yet been initialized. if (this._selectedIndex != indexToSelect && this._selectedIndex != null) { - this.selectChange.emit(this._createChangeEvent(indexToSelect)); + const tabChangeEvent = this._createChangeEvent(indexToSelect); + this.selectedTabChange.emit(tabChangeEvent); // Emitting this value after change detection has run // since the checked content may contain this variable' Promise.resolve().then(() => this.selectedIndexChange.emit(indexToSelect)); diff --git a/src/lib/tabs/tabs.md b/src/lib/tabs/tabs.md index 2a6f7465c007..4ff541e86bfa 100644 --- a/src/lib/tabs/tabs.md +++ b/src/lib/tabs/tabs.md @@ -10,7 +10,7 @@ tab labels in the header. ### Events -The `selectChange` output event is emitted when the active tab changes. +The `selectedTabChange` output event is emitted when the active tab changes. The `focusChange` output event is emitted when the user puts focus on any of the tab labels in the header, usually through keyboard navigation.