fix(badge): disable animations when using NoopAnimationsModule (#11408)

Author: crisbeto

src/lib/badge/_badge-theme.scss

@@ -155,6 +155,11 @@ $mat-badge-large-size: $mat-badge-default-size + 6;
     pointer-events: none;
   }
 
+  .ng-animate-disabled .mat-badge-content,
+  .mat-badge-content._mat-animation-noopable {
+    transition: none;
+  }
+
   // The active class is added after the element is added
   // so it can animate scale to default
   .mat-badge-content.mat-badge-active {

src/lib/badge/badge.ts

@@ -20,6 +20,7 @@ import {
   Renderer2,
 } from '@angular/core';
 import {ThemePalette, mixinDisabled, CanDisableCtor, CanDisable} from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 let nextId = 0;
@@ -122,9 +123,10 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl
       private _elementRef: ElementRef<HTMLElement>,
       private _ariaDescriber: AriaDescriber,
       /** @breaking-change 8.0.0 Make _renderer a required param and remove _document. */
-      private _renderer?: Renderer2) {
-        super();
-      }
+      private _renderer?: Renderer2,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) {
+      super();
+    }
 
   /** Whether the badge is above the host or not */
   isAbove(): boolean {
@@ -163,14 +165,18 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl
     badgeElement.classList.add('mat-badge-content');
     badgeElement.textContent = this.content;
 
+    if (this._animationMode === 'NoopAnimations') {
+      badgeElement.classList.add('_mat-animation-noopable');
+    }
+
     if (this.description) {
       badgeElement.setAttribute('aria-label', this.description);
     }
 
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
-    if (typeof requestAnimationFrame === 'function') {
+    if (typeof requestAnimationFrame === 'function' && this._animationMode !== 'NoopAnimations') {
       this._ngZone.runOutsideAngular(() => {
         requestAnimationFrame(() => {
           badgeElement.classList.add(activeClass);

tools/public_api_guard/lib/badge.d.ts

@@ -0,0 +1,28 @@
+export declare const _MatBadgeMixinBase: CanDisableCtor & typeof MatBadgeBase;
+
+export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisable {
+    _hasContent: boolean;
+    _id: number;
+    color: ThemePalette;
+    content: string;
+    description: string;
+    hidden: boolean;
+    overlap: boolean;
+    position: MatBadgePosition;
+    size: MatBadgeSize;
+    constructor(_document: any, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _ariaDescriber: AriaDescriber,
+    _renderer?: Renderer2 | undefined, _animationMode?: string | undefined);
+    isAbove(): boolean;
+    isAfter(): boolean;
+    ngOnDestroy(): void;
+}
+
+export declare class MatBadgeBase {
+}
+
+export declare class MatBadgeModule {
+}
+
+export declare type MatBadgePosition = 'above after' | 'above before' | 'below before' | 'below after';
+
+export declare type MatBadgeSize = 'small' | 'medium' | 'large';