refactor(badge): rework to account for ivy changes

Reworks `matBadge` to account for Ivy setting static inputs before the view has been rendered out. This caused one of the tests to fail, because it relied on the view being in place when the `content` setter is called.

Author: crisbeto

src/lib/badge/badge.ts

@@ -15,11 +15,13 @@ import {
   Inject,
   Input,
   NgZone,
+  OnChanges,
   OnDestroy,
   Optional,
   Renderer2,
+  SimpleChanges,
 } from '@angular/core';
-import {ThemePalette, mixinDisabled, CanDisableCtor, CanDisable} from '@angular/material/core';
+import {CanDisable, CanDisableCtor, mixinDisabled, ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
@@ -53,7 +55,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
     '[class.mat-badge-disabled]': 'disabled',
   },
 })
-export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisable {
+export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable {
   /** Whether the badge has any content. */
   _hasContent = false;
 
@@ -81,14 +83,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl
   @Input('matBadgePosition') position: MatBadgePosition = 'above after';
 
   /** The content for the badge */
-  @Input('matBadge')
-  get content(): string { return this._content; }
-  set content(value: string) {
-    this._content = value;
-    this._hasContent = value != null && `${value}`.trim().length > 0;
-    this._updateTextContent();
-  }
-  private _content: string;
+  @Input('matBadge') content: string;
 
   /** Message used to describe the decorated element via aria-describedby */
   @Input('matBadgeDescription')
@@ -144,6 +139,18 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl
     return this.position.indexOf('before') === -1;
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    const contentChange = changes.content;
+
+    // Note that it's important that we do this in ngOnChanges, because with Ivy we aren't
+    // guaranteed for the DOM to be initialized when the `content` setter is run for the first time.
+    if (contentChange) {
+      const value = contentChange.currentValue;
+      this._hasContent = value != null && `${value}`.trim().length > 0;
+      this._updateTextContent();
+    }
+  }
+
   ngOnDestroy() {
     const badgeElement = this._badgeElement;
 

tools/public_api_guard/lib/badge.d.ts

@@ -1,6 +1,6 @@
 export declare const _MatBadgeMixinBase: CanDisableCtor & typeof MatBadgeBase;
 
-export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisable {
+export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable {
     _hasContent: boolean;
     _id: number;
     color: ThemePalette;
@@ -14,6 +14,7 @@ export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, C
     _renderer?: Renderer2 | undefined, _animationMode?: string | undefined);
     isAbove(): boolean;
     isAfter(): boolean;
+    ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
 }