refactor(badge): add method that exposes badge content element (#15869)

Adds a method that exposes the underlying badge content element. This allows consumers to add their own custom attributes to the badge element, without us having to proxy them through inputs.

Fixes #15801.

Author: crisbeto

src/material/badge/badge.spec.ts

@@ -1,5 +1,5 @@
 import {ComponentFixture, TestBed, fakeAsync} from '@angular/core/testing';
-import {Component, DebugElement, ViewEncapsulation} from '@angular/core';
+import {Component, DebugElement, ViewEncapsulation, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MatBadge, MatBadgeModule} from './index';
 import {ThemePalette} from '@angular/material/core';
@@ -200,6 +200,11 @@ describe('MatBadge', () => {
     expect(preExistingFixture.nativeElement.querySelectorAll('.mat-badge-content').length).toBe(2);
   });
 
+  it('should expose the badge element', () => {
+    const badgeElement = badgeNativeElement.querySelector('.mat-badge-content')!;
+    expect(fixture.componentInstance.badgeInstance.getBadgeElement()).toBe(badgeElement);
+  });
+
 });
 
 /** Test component that contains a MatBadge. */
@@ -221,6 +226,7 @@ describe('MatBadge', () => {
   `
 })
 class BadgeTestApp {
+  @ViewChild(MatBadge, {static: false}) badgeInstance: MatBadge;
   badgeColor: ThemePalette;
   badgeContent: string | number = '1';
   badgeDirection = 'above after';

src/material/badge/badge.ts

@@ -115,7 +115,7 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
   /** Unique id for the badge */
   _id: number = nextId++;
 
-  private _badgeElement: HTMLElement;
+  private _badgeElement: HTMLElement | undefined;
 
   constructor(
       private _ngZone: NgZone,
@@ -162,6 +162,14 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, OnChanges
     }
   }
 
+  /**
+   * Gets the element into which the badge's content is being rendered.
+   * Undefined if the element hasn't been created (e.g. if the badge doesn't have content).
+   */
+  getBadgeElement(): HTMLElement | undefined {
+    return this._badgeElement;
+  }
+
   /** Injects a span element into the DOM with the content. */
   private _updateTextContent(): HTMLSpanElement {
     if (!this._badgeElement) {

tools/public_api_guard/material/badge.d.ts

@@ -9,6 +9,7 @@ export declare class MatBadge extends _MatBadgeMixinBase implements OnDestroy, O
     position: MatBadgePosition;
     size: MatBadgeSize;
     constructor(_ngZone: NgZone, _elementRef: ElementRef<HTMLElement>, _ariaDescriber: AriaDescriber, _renderer: Renderer2, _animationMode?: string | undefined);
+    getBadgeElement(): HTMLElement | undefined;
     isAbove(): boolean;
     isAfter(): boolean;
     ngOnChanges(changes: SimpleChanges): void;