fix(tabs): update tab output names (#7134)

Author: amcdnl

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<number> = new EventEmitter<number>();
+  @Output() _onCentering: EventEmitter<number> = new EventEmitter<number>();
 
   /** Event emitted when the tab completes its animation towards the center. */
-  @Output() onCentered: EventEmitter<void> = new EventEmitter<void>(true);
+  @Output() _onCentered: EventEmitter<void> = new EventEmitter<void>(true);
 
   /** The tab body content to display. */
   @Input('content') _content: TemplatePortal<any>;
@@ -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();
     }
   }
 

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)">
   </mat-tab-body>
 </div>

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)">
       <mat-tab>
         <ng-template mat-tab-label>Tab One</ng-template>
         Tab one content
@@ -448,7 +448,7 @@ class SimpleTabsTestApp {
     <mat-tab-group class="tab-group"
         [(selectedIndex)]="selectedIndex"
         (focusChange)="handleFocus($event)"
-        (selectChange)="handleSelection($event)">
+        (selectedTabChange)="handleSelection($event)">
       <mat-tab *ngFor="let tab of tabs">
         <ng-template mat-tab-label>{{tab.label}}</ng-template>
         {{tab.content}}

src/lib/tabs/tab-group.ts

@@ -141,9 +141,15 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
   @Output() focusChange: EventEmitter<MatTabChangeEvent> = new EventEmitter<MatTabChangeEvent>();
 
   /** Event emitted when the tab selection has changed. */
-  @Output() selectChange: EventEmitter<MatTabChangeEvent> =
+  @Output() selectedTabChange: EventEmitter<MatTabChangeEvent> =
       new EventEmitter<MatTabChangeEvent>(true);
 
+  /**
+   * Event emitted when the tab selection has changed.
+   * @deprecated Use `selectedTabChange` instead.
+   */
+  @Output() selectChange: EventEmitter<MatTabChangeEvent> = 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));

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.