fix(badge): allow more data types for badge content

Currently the badge's content is limited to `string` which excludes other legitimate use cases like numbers. These changes turn it into an `any` with the option configure it through a generic parameter since we aren't actually doing anything with the value, apart from forwarding it.

Fixes angular#20326.

src/material/badge/badge.spec.ts

@@ -27,15 +27,38 @@ describe('MatBadge', () => {
   }));
 
   it('should update the badge based on attribute', () => {
-    let badgeContentDebugElement = badgeNativeElement.querySelector('.mat-badge-content')!;
-
-    expect(badgeContentDebugElement.textContent).toContain('1');
+    const badgeElement = badgeNativeElement.querySelector('.mat-badge-content')!;
+    expect(badgeElement.textContent).toContain('1');
 
     testComponent.badgeContent = '22';
     fixture.detectChanges();
+    expect(badgeElement.textContent).toContain('22');
+  });
+
+  it('should be able to pass in falsy values to the badge content', () => {
+    const badgeElement = badgeNativeElement.querySelector('.mat-badge-content')!;
+    expect(badgeElement.textContent).toContain('1');
+
+    testComponent.badgeContent = 0;
+    fixture.detectChanges();
+    expect(badgeElement.textContent).toContain('0');
 
-    badgeContentDebugElement = badgeNativeElement.querySelector('.mat-badge-content')!;
-    expect(badgeContentDebugElement.textContent).toContain('22');
+    testComponent.badgeContent = false;
+    fixture.detectChanges();
+    expect(badgeElement.textContent).toContain('false');
+  });
+
+  it('should treat null and undefined as empty strings in the badge content', () => {
+    const badgeElement = badgeNativeElement.querySelector('.mat-badge-content')!;
+    expect(badgeElement.textContent).toContain('1');
+
+    testComponent.badgeContent = null;
+    fixture.detectChanges();
+    expect(badgeElement.textContent?.trim()).toBe('');
+
+    testComponent.badgeContent = undefined;
+    fixture.detectChanges();
+    expect(badgeElement.textContent?.trim()).toBe('');
   });
 
   it('should apply class based on color attribute', () => {
@@ -234,7 +257,7 @@ describe('MatBadge', () => {
 class BadgeTestApp {
   @ViewChild(MatBadge) badgeInstance: MatBadge;
   badgeColor: ThemePalette;
-  badgeContent: string | number = '1';
+  badgeContent: any = '1';
   badgeDirection = 'above after';
   badgeHidden = false;
   badgeSize = 'medium';

src/material/badge/badge.ts

@@ -60,7 +60,8 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
     '[class.mat-badge-disabled]': 'disabled',
   },
 })
-export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable {
+export class MatBadge<T = any> extends _MatBadgeMixinBase implements OnDestroy, OnChanges,
+  CanDisable {
   /** Whether the badge has any content. */
   _hasContent = false;
 
@@ -88,7 +89,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
   @Input('matBadgePosition') position: MatBadgePosition = 'above after';
 
   /** The content for the badge */
-  @Input('matBadge') content: string;
+  @Input('matBadge') content: T;
 
   /** Message used to describe the decorated element via aria-describedby */
   @Input('matBadgeDescription')
@@ -188,7 +189,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
     if (!this._badgeElement) {
       this._badgeElement = this._createBadgeElement();
     } else {
-      this._badgeElement.textContent = this.content;
+      this._badgeElement.textContent = this._stringifyContent();
     }
     return this._badgeElement;
   }
@@ -203,7 +204,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
     this._clearExistingBadges(contentClass);
     badgeElement.setAttribute('id', `mat-badge-content-${this._id}`);
     badgeElement.classList.add(contentClass);
-    badgeElement.textContent = this.content;
+    badgeElement.textContent = this._stringifyContent();
 
     if (this._animationMode === 'NoopAnimations') {
       badgeElement.classList.add('_mat-animation-noopable');
@@ -246,11 +247,12 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
   /** Adds css theme class given the color to the component host */
   private _setColor(colorPalette: ThemePalette) {
     if (colorPalette !== this._color) {
+      const classList = this._elementRef.nativeElement.classList;
       if (this._color) {
-        this._elementRef.nativeElement.classList.remove(`mat-badge-${this._color}`);
+        classList.remove(`mat-badge-${this._color}`);
       }
       if (colorPalette) {
-        this._elementRef.nativeElement.classList.add(`mat-badge-${colorPalette}`);
+        classList.add(`mat-badge-${colorPalette}`);
       }
     }
   }
@@ -270,6 +272,14 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
     }
   }
 
+  /** Gets the string representation of the badge content. */
+  private _stringifyContent(): string {
+    // Convert null and undefined to an empty string which is consistent
+    // with how Angular handles them in inside template interpolations.
+    const content = this.content;
+    return content == null ? '' : `${content}`;
+  }
+
   static ngAcceptInputType_disabled: BooleanInput;
   static ngAcceptInputType_hidden: BooleanInput;
   static ngAcceptInputType_overlap: BooleanInput;

tools/public_api_guard/material/badge.d.ts

@@ -1,9 +1,9 @@
-export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable {
+export declare class MatBadge<T = any> extends _MatBadgeMixinBase implements OnDestroy, OnChanges, CanDisable {
     _hasContent: boolean;
     _id: number;
     get color(): ThemePalette;
     set color(value: ThemePalette);
-    content: string;
+    content: T;
     get description(): string;
     set description(newDescription: string);
     get hidden(): boolean;
@@ -21,8 +21,8 @@ export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, O
     static ngAcceptInputType_disabled: BooleanInput;
     static ngAcceptInputType_hidden: BooleanInput;
     static ngAcceptInputType_overlap: BooleanInput;
-    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatBadge, "[matBadge]", never, { "disabled": "matBadgeDisabled"; "color": "matBadgeColor"; "overlap": "matBadgeOverlap"; "position": "matBadgePosition"; "content": "matBadge"; "description": "matBadgeDescription"; "size": "matBadgeSize"; "hidden": "matBadgeHidden"; }, {}, never>;
-    static ɵfac: i0.ɵɵFactoryDef<MatBadge, [null, null, null, null, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDefWithMeta<MatBadge<any>, "[matBadge]", never, { "disabled": "matBadgeDisabled"; "color": "matBadgeColor"; "overlap": "matBadgeOverlap"; "position": "matBadgePosition"; "content": "matBadge"; "description": "matBadgeDescription"; "size": "matBadgeSize"; "hidden": "matBadgeHidden"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDef<MatBadge<any>, [null, null, null, null, { optional: true; }]>;
 }
 
 export declare class MatBadgeModule {