From 5d2a19868413dbf45826179dceabb04adcf865f6 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sat, 20 Apr 2019 20:50:03 +0200
Subject: [PATCH] refactor(badge): add method that exposes badge content
 element

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.
---
 src/material/badge/badge.spec.ts           |  8 +++++++-
 src/material/badge/badge.ts                | 10 +++++++++-
 tools/public_api_guard/material/badge.d.ts |  1 +
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/material/badge/badge.spec.ts b/src/material/badge/badge.spec.ts
index a06737df9b5a..12ac5f24434a 100644
--- a/src/material/badge/badge.spec.ts
+++ b/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';
diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts
index 5a7d51101023..a8019a03e0fd 100644
--- a/src/material/badge/badge.ts
+++ b/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) {
diff --git a/tools/public_api_guard/material/badge.d.ts b/tools/public_api_guard/material/badge.d.ts
index 0f2f055e6750..01237a77a065 100644
--- a/tools/public_api_guard/material/badge.d.ts
+++ b/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;