fix(tabs): no longer use OnPush

This resolves an issue with ivy where the template content would be
checked out of sync with the tab view. See #15440 for additional
context.

Author: jelbourn

src/material/tabs/tab-body.ts

@@ -6,31 +6,31 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {AnimationEvent} from '@angular/animations';
+import {Direction, Directionality} from '@angular/cdk/bidi';
+import {CdkPortalOutlet, PortalHostDirective, TemplatePortal} from '@angular/cdk/portal';
 import {
-  Component,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
-  Input,
-  Inject,
-  Output,
+  Component,
+  ComponentFactoryResolver,
+  Directive,
+  ElementRef,
   EventEmitter,
+  forwardRef,
+  Inject,
+  Input,
   OnDestroy,
   OnInit,
-  ElementRef,
-  Directive,
   Optional,
-  ViewEncapsulation,
-  ChangeDetectionStrategy,
-  ComponentFactoryResolver,
-  ViewContainerRef,
-  forwardRef,
+  Output,
   ViewChild,
+  ViewContainerRef,
+  ViewEncapsulation,
 } from '@angular/core';
-import {AnimationEvent} from '@angular/animations';
-import {TemplatePortal, CdkPortalOutlet, PortalHostDirective} from '@angular/cdk/portal';
-import {Directionality, Direction} from '@angular/cdk/bidi';
-import {Subscription, Subject} from 'rxjs';
+import {Subject, Subscription} from 'rxjs';
+import {distinctUntilChanged, startWith} from 'rxjs/operators';
 import {matTabsAnimations} from './tabs-animations';
-import {startWith, distinctUntilChanged} from 'rxjs/operators';
 
 /**
  * These position states are used internally as animation states for the tab body. Setting the
@@ -108,7 +108,8 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
   templateUrl: 'tab-body.html',
   styleUrls: ['tab-body.css'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
   animations: [matTabsAnimations.translateTab],
   host: {
     'class': 'mat-tab-body',

src/material/tabs/tab-group.ts

@@ -16,15 +16,15 @@ import {
   ContentChildren,
   ElementRef,
   EventEmitter,
+  Inject,
+  InjectionToken,
   Input,
   OnDestroy,
+  Optional,
   Output,
   QueryList,
   ViewChild,
   ViewEncapsulation,
-  Optional,
-  Inject,
-  InjectionToken,
 } from '@angular/core';
 import {
   CanColor,
@@ -35,10 +35,10 @@ import {
   mixinDisableRipple,
   ThemePalette,
 } from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {merge, Subscription} from 'rxjs';
 import {MatTab} from './tab';
 import {MatTabHeader} from './tab-header';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /** Used to generate unique ID's for each tab component */
@@ -84,7 +84,8 @@ const _MatTabGroupMixinBase: CanColorCtor & CanDisableRippleCtor & typeof MatTab
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
   inputs: ['color', 'disableRipple'],
   host: {
     'class': 'mat-tab-group',

src/material/tabs/tab-header.ts

@@ -7,31 +7,31 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {Platform} from '@angular/cdk/platform';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {
   AfterContentChecked,
   AfterContentInit,
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ContentChildren,
   ElementRef,
+  Inject,
+  Input,
   NgZone,
   OnDestroy,
   Optional,
   QueryList,
   ViewChild,
   ViewEncapsulation,
-  AfterViewInit,
-  Input,
-  Inject,
 } from '@angular/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {MatInkBar} from './ink-bar';
-import {MatTabLabelWrapper} from './tab-label-wrapper';
-import {Platform} from '@angular/cdk/platform';
 import {MatPaginatedTabHeader} from './paginated-tab-header';
+import {MatTabLabelWrapper} from './tab-label-wrapper';
 
 /**
  * The header of the tab group which displays a list of all the tabs in the tab group. Includes
@@ -48,7 +48,8 @@ import {MatPaginatedTabHeader} from './paginated-tab-header';
   inputs: ['selectedIndex'],
   outputs: ['selectFocusedIndex', 'indexFocused'],
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
   host: {
     'class': 'mat-tab-header',
     '[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',

src/material/tabs/tab.ts

@@ -38,8 +38,9 @@ const _MatTabMixinBase: CanDisableCtor & typeof MatTabBase =
   selector: 'mat-tab',
   templateUrl: 'tab.html',
   inputs: ['disabled'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  // tslint:disable-next-line:validate-decorators
+  changeDetection: ChangeDetectionStrategy.Default,
   exportAs: 'matTab',
 })
 export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {