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

Author: crisbeto

src/lib/badge/_badge-theme.scss

@@ -163,6 +163,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;
@@ -128,9 +129,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 {
@@ -180,14 +182,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

@@ -11,7 +11,7 @@ export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, C
     position: MatBadgePosition;
     size: MatBadgeSize;
     constructor(_document: any, _ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _ariaDescriber: AriaDescriber,
-    _renderer?: Renderer2 | undefined);
+    _renderer?: Renderer2 | undefined, _animationMode?: string | undefined);
     isAbove(): boolean;
     isAfter(): boolean;
     ngOnDestroy(): void;