From 06b401774b2c6df5d6649182eb5a544045722dc8 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sun, 18 Feb 2018 01:34:32 +0100
Subject: [PATCH] fix(badge): AoT and server-side rendering errors (#9935)

* Adds the badge component to the kitchen sink checks.
* Fixes an AoT error due to a reference to a private property in the `host` binding.
* Fixes a server-side rendering error due to a usage of `requestAnimationFrame`.
---
 src/lib/badge/badge.ts                        | 19 ++++++++++++-------
 .../kitchen-sink/kitchen-sink.html            |  6 ++++++
 .../kitchen-sink/kitchen-sink.ts              |  2 ++
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts
index 9b44702e8bc..ba916197135 100644
--- a/src/lib/badge/badge.ts
+++ b/src/lib/badge/badge.ts
@@ -22,7 +22,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
   selector: '[matBadge]',
   host: {
     'class': 'mat-badge',
-    '[class.mat-badge-overlap]': '_overlap',
+    '[class.mat-badge-overlap]': 'overlap',
     '[class.mat-badge-above]': 'isAbove()',
     '[class.mat-badge-below]': '!isAbove()',
     '[class.mat-badge-before]': '!isAfter()',
@@ -123,6 +123,8 @@ export class MatBadge {
   /** Creates the badge element */
   private _createBadgeElement(): HTMLElement {
     const badgeElement = this._document.createElement('span');
+    const activeClass = 'mat-badge-active';
+
     badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
     badgeElement.classList.add('mat-badge-content');
     badgeElement.textContent = this.content;
@@ -134,12 +136,15 @@ export class MatBadge {
     this._elementRef.nativeElement.appendChild(badgeElement);
 
     // animate in after insertion
-    this._ngZone.runOutsideAngular(() => requestAnimationFrame(() => {
-      // ensure content available
-      if (badgeElement) {
-        badgeElement.classList.add('mat-badge-active');
-      }
-    }));
+    if (typeof requestAnimationFrame === 'function') {
+      this._ngZone.runOutsideAngular(() => {
+        requestAnimationFrame(() => {
+          badgeElement.classList.add(activeClass);
+        });
+      });
+    } else {
+      badgeElement.classList.add(activeClass);
+    }
 
     return badgeElement;
   }
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index 486019098e4..a90531316f7 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/src/universal-app/kitchen-sink/kitchen-sink.html
@@ -326,3 +326,9 @@
 <div cdkTrapFocus cdkTrapFocusAutoCapture>
   <button>Oh no, I'm trapped!</button>
 </div>
+
+<h2>Badge</h2>
+
+<button mat-raised-button matBadge="Clicked 1337 times">
+  Clicky thing
+</button>
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts
index a5d0c4d873c..4544766bdf4 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.ts
+++ b/src/universal-app/kitchen-sink/kitchen-sink.ts
@@ -3,6 +3,7 @@ import {ServerModule} from '@angular/platform-server';
 import {BrowserModule} from '@angular/platform-browser';
 import {
   MatAutocompleteModule,
+  MatBadgeModule,
   MatButtonModule,
   MatButtonToggleModule,
   MatCardModule,
@@ -93,6 +94,7 @@ export class KitchenSink {
   imports: [
     BrowserModule.withServerTransition({appId: 'kitchen-sink'}),
     MatAutocompleteModule,
+    MatBadgeModule,
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,