From 19fd524fc9b43e9c0b09839cbcf4786cbd022106 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 21 Aug 2024 09:48:03 +0200
Subject: [PATCH] refactor(material/badge): use common service for loading
 structural styles

Switches the badge to use the common style loading service to load its structural styles.
---
 src/material/badge/BUILD.bazel |  1 +
 src/material/badge/badge.ts    | 25 +++----------------------
 2 files changed, 4 insertions(+), 22 deletions(-)

diff --git a/src/material/badge/BUILD.bazel b/src/material/badge/BUILD.bazel
index 55052119d521..e1dc6d85e23a 100644
--- a/src/material/badge/BUILD.bazel
+++ b/src/material/badge/BUILD.bazel
@@ -22,6 +22,7 @@ ng_module(
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",
+        "//src/cdk/private",
         "//src/material/core",
         "@npm//@angular/animations",
         "@npm//@angular/common",
diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts
index 74789e31d8cc..0ae9bfb0af22 100644
--- a/src/material/badge/badge.ts
+++ b/src/material/badge/badge.ts
@@ -9,14 +9,11 @@
 import {AriaDescriber, InteractivityChecker} from '@angular/cdk/a11y';
 import {DOCUMENT} from '@angular/common';
 import {
-  ApplicationRef,
   booleanAttribute,
   ChangeDetectionStrategy,
   Component,
-  createComponent,
   Directive,
   ElementRef,
-  EnvironmentInjector,
   inject,
   Inject,
   Input,
@@ -29,6 +26,7 @@ import {
   ANIMATION_MODULE_TYPE,
 } from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
+import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
 let nextId = 0;
 
@@ -48,9 +46,6 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
 
 const BADGE_CONTENT_CLASS = 'mat-badge-content';
 
-/** Keeps track of the apps currently containing badges. */
-const badgeApps = new Set<ApplicationRef>();
-
 /**
  * Component used to load the structural styles of the badge.
  * @docs-private
@@ -162,22 +157,8 @@ export class MatBadge implements OnInit, OnDestroy {
     private _renderer: Renderer2,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) private _animationMode?: string,
   ) {
-    const appRef = inject(ApplicationRef);
-
-    if (!badgeApps.has(appRef)) {
-      badgeApps.add(appRef);
-
-      const componentRef = createComponent(_MatBadgeStyleLoader, {
-        environmentInjector: inject(EnvironmentInjector),
-      });
-
-      appRef.onDestroy(() => {
-        badgeApps.delete(appRef);
-        if (badgeApps.size === 0) {
-          componentRef.destroy();
-        }
-      });
-    }
+    const styleLoader = inject(_CdkPrivateStyleLoader);
+    styleLoader.loadStyles(_MatBadgeStyleLoader);
 
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       const nativeElement = _elementRef.nativeElement;