fix(tabs): disable all animations when using NoopAnimationsModule (#11395)

Currently some animations in the tab components don't get disabled, when using the `NoopAnimationsModule`, because they don't go through the Angular animations. These changes ensure that everything will be disabled.

Fixes #10590.

Author: crisbeto

src/material/tabs/_tabs-common.scss

@@ -1,4 +1,5 @@
 @import '../core/style/variables';
+@import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
 $mat-tab-bar-height: 48px !default;
@@ -61,6 +62,7 @@ $mat-tab-animation-duration: 500ms !default;
 @mixin ink-bar {
   $height: 2px;
 
+  @include _noop-animation();
   position: absolute;
   bottom: 0;
   height: $height;

src/material/tabs/ink-bar.ts

@@ -6,7 +6,8 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, ElementRef, Inject, InjectionToken, NgZone} from '@angular/core';
+import {Directive, ElementRef, Inject, InjectionToken, NgZone, Optional} from '@angular/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /**
@@ -46,13 +47,15 @@ export function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner {
   selector: 'mat-ink-bar',
   host: {
     'class': 'mat-ink-bar',
+    '[class._mat-animation-noopable]': `_animationMode === 'NoopAnimations'`,
   },
 })
 export class MatInkBar {
   constructor(
     private _elementRef: ElementRef<HTMLElement>,
     private _ngZone: NgZone,
-    @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner) { }
+    @Inject(_MAT_INK_BAR_POSITIONER) private _inkBarPositioner: _MatInkBarPositioner,
+    @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { }
 
   /**
    * Calculates the styles from the provided element in order to align the ink-bar to that element.

src/material/tabs/tab-group.html

@@ -31,7 +31,10 @@
   </div>
 </mat-tab-header>
 
-<div class="mat-tab-body-wrapper" #tabBodyWrapper>
+<div
+  class="mat-tab-body-wrapper"
+  [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
+  #tabBodyWrapper>
   <mat-tab-body role="tabpanel"
                *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"

src/material/tabs/tab-group.scss

@@ -1,5 +1,6 @@
 @import '../core/style/variables';
 @import '../core/style/layout-common';
+@import '../core/style/noop-animation';
 @import './tabs-common';
 
 .mat-tab-group {
@@ -37,6 +38,7 @@
 
 // The bottom section of the view; contains the tab bodies
 .mat-tab-body-wrapper {
+  @include _noop-animation();
   position: relative;
   overflow: hidden;
   display: flex;

src/material/tabs/tab-group.ts

@@ -22,9 +22,9 @@ import {
   QueryList,
   ViewChild,
   ViewEncapsulation,
-  InjectionToken,
-  Inject,
   Optional,
+  Inject,
+  InjectionToken,
 } from '@angular/core';
 import {
   CanColor,
@@ -38,6 +38,7 @@ import {
 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 */
@@ -171,7 +172,8 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
 
   constructor(elementRef: ElementRef,
               private _changeDetectorRef: ChangeDetectorRef,
-              @Inject(MAT_TABS_CONFIG) @Optional() defaultConfig?: MatTabsConfig) {
+              @Inject(MAT_TABS_CONFIG) @Optional() defaultConfig?: MatTabsConfig,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(elementRef);
     this._groupId = nextId++;
     this.animationDuration = defaultConfig && defaultConfig.animationDuration ?

src/material/tabs/tab-header.html

@@ -11,7 +11,12 @@
 
 <div class="mat-tab-label-container" #tabListContainer
      (keydown)="_handleKeydown($event)">
-  <div class="mat-tab-list" #tabList role="tablist" (cdkObserveContent)="_onContentChanges()">
+  <div
+    class="mat-tab-list"
+    [class._mat-animation-noopable]="_animationMode === 'NoopAnimations'"
+    #tabList
+    role="tablist"
+    (cdkObserveContent)="_onContentChanges()">
     <div class="mat-tab-labels">
       <ng-content></ng-content>
     </div>

src/material/tabs/tab-header.scss

@@ -1,6 +1,7 @@
 @import '../core/style/variables';
 @import '../core/style/layout-common';
 @import '../core/style/vendor-prefixes';
+@import '../core/style/noop-animation';
 @import './tabs-common';
 
 .mat-tab-header {
@@ -79,6 +80,7 @@
 }
 
 .mat-tab-list {
+  @include _noop-animation();
   flex-grow: 1;
   position: relative;
   transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);

src/material/tabs/tab-header.ts

@@ -21,6 +21,7 @@ import {
   EventEmitter,
   Input,
   NgZone,
+  Inject,
   OnDestroy,
   Optional,
   Output,
@@ -36,6 +37,7 @@ import {MatInkBar} from './ink-bar';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {FocusKeyManager} from '@angular/cdk/a11y';
 import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 /** Config used to bind passive event listeners */
@@ -165,7 +167,9 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
               private _viewportRuler: ViewportRuler,
               @Optional() private _dir: Directionality,
               private _ngZone: NgZone,
-              private _platform: Platform) {
+              private _platform: Platform,
+              // @breaking-change 9.0.0 `_animationMode` parameter to be made required.
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super();
 
     // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -47,6 +47,7 @@ import {merge, of as observableOf, Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
 import {MatInkBar} from '../ink-bar';
 import {FocusMonitor} from '@angular/cdk/a11y';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 // Boilerplate for applying mixins to MatTabNav.
@@ -222,7 +223,8 @@ export class MatTabLink extends _MatTabLinkMixinBase
       private _tabNavBar: MatTabNav, public _elementRef: ElementRef, ngZone: NgZone,
       platform: Platform,
       @Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions: RippleGlobalOptions|null,
-      @Attribute('tabindex') tabIndex: string, private _focusMonitor: FocusMonitor) {
+      @Attribute('tabindex') tabIndex: string, private _focusMonitor: FocusMonitor,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string) {
     super();
 
     this._tabLinkRipple = new RippleRenderer(this, ngZone, _elementRef, platform);
@@ -231,6 +233,10 @@ export class MatTabLink extends _MatTabLinkMixinBase
 
     this.tabIndex = parseInt(tabIndex) || 0;
     _focusMonitor.monitor(_elementRef);
+
+    if (animationMode === 'NoopAnimations') {
+      this.rippleConfig.animation = {enterDuration: 0, exitDuration: 0};
+    }
   }
 
   ngOnDestroy() {

tools/public_api_guard/material/tabs.d.ts

@@ -10,7 +10,8 @@ export interface _MatInkBarPositioner {
 export declare const MAT_TABS_CONFIG: InjectionToken<{}>;
 
 export declare class MatInkBar {
-    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _inkBarPositioner: _MatInkBarPositioner);
+    _animationMode?: string | undefined;
+    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _inkBarPositioner: _MatInkBarPositioner, _animationMode?: string | undefined);
     alignToElement(element: HTMLElement): void;
     hide(): void;
     show(): void;
@@ -75,6 +76,7 @@ export declare class MatTabContent {
 }
 
 export declare class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentInit, AfterContentChecked, OnDestroy, CanColor, CanDisableRipple {
+    _animationMode?: string | undefined;
     _tabBodyWrapper: ElementRef;
     _tabHeader: MatTabHeader;
     _tabs: QueryList<MatTab>;
@@ -87,7 +89,7 @@ export declare class MatTabGroup extends _MatTabGroupMixinBase implements AfterC
     selectedIndex: number | null;
     readonly selectedIndexChange: EventEmitter<number>;
     readonly selectedTabChange: EventEmitter<MatTabChangeEvent>;
-    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig);
+    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, defaultConfig?: MatTabsConfig, _animationMode?: string | undefined);
     _focusChanged(index: number): void;
     _getTabContentId(i: number): string;
     _getTabIndex(tab: MatTab, idx: number): number | null;
@@ -102,6 +104,7 @@ export declare class MatTabGroup extends _MatTabGroupMixinBase implements AfterC
 }
 
 export declare class MatTabHeader extends _MatTabHeaderMixinBase implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy, CanDisableRipple {
+    _animationMode?: string | undefined;
     _disableScrollAfter: boolean;
     _disableScrollBefore: boolean;
     _inkBar: MatInkBar;
@@ -116,7 +119,7 @@ export declare class MatTabHeader extends _MatTabHeaderMixinBase implements Afte
     scrollDistance: number;
     readonly selectFocusedIndex: EventEmitter<number>;
     selectedIndex: number;
-    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _dir: Directionality, _ngZone: NgZone, _platform: Platform);
+    constructor(_elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _viewportRuler: ViewportRuler, _dir: Directionality, _ngZone: NgZone, _platform: Platform, _animationMode?: string | undefined);
     _alignInkBarToSelectedTab(): void;
     _checkPaginationEnabled(): void;
     _checkScrollingControls(): void;
@@ -162,7 +165,7 @@ export declare class MatTabLink extends _MatTabLinkMixinBase implements OnDestro
     active: boolean;
     rippleConfig: RippleConfig & RippleGlobalOptions;
     readonly rippleDisabled: boolean;
-    constructor(_tabNavBar: MatTabNav, _elementRef: ElementRef, ngZone: NgZone, platform: Platform, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, _focusMonitor: FocusMonitor);
+    constructor(_tabNavBar: MatTabNav, _elementRef: ElementRef, ngZone: NgZone, platform: Platform, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, _focusMonitor: FocusMonitor, animationMode?: string);
     ngOnDestroy(): void;
 }