fix(badge): disable animations when using NoopAnimationsModule

Fixes the badge transitions not being disabled when using the `NoopAnimationsModule`.

Relates to #10590.

Author: crisbeto

src/lib/badge/_badge-theme.scss

@@ -139,6 +139,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} from '@angular/material/core';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
 let nextId = 0;
@@ -112,8 +113,12 @@ export class MatBadge implements OnDestroy {
       private _ngZone: NgZone,
       private _elementRef: ElementRef<HTMLElement>,
       private _ariaDescriber: AriaDescriber,
-      /** @breaking-change 8.0.0 Make _renderer a required param and remove _document. */
-      private _renderer?: Renderer2) {}
+      /**
+       * @breaking-change 8.0.0 Make _renderer and _animationMode
+       * required params and remove _document.
+       */
+      private _renderer?: Renderer2,
+      @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string) {}
 
   /** Whether the badge is above the host or not */
   isAbove(): boolean {
@@ -152,14 +157,18 @@ export class MatBadge implements OnDestroy {
     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);