refactor(material/badge): convert to standalone

Converts `material/badge` to standalone.

Author: crisbeto

src/material/badge/badge-module.ts

@@ -12,8 +12,7 @@ import {A11yModule} from '@angular/cdk/a11y';
 import {MatBadge} from './badge';
 
 @NgModule({
-  imports: [A11yModule, MatCommonModule],
+  imports: [A11yModule, MatCommonModule, MatBadge],
   exports: [MatBadge, MatCommonModule],
-  declarations: [MatBadge],
 })
 export class MatBadgeModule {}

src/material/badge/badge.spec.ts

@@ -14,8 +14,13 @@ describe('MatBadge', () => {
 
     beforeEach(fakeAsync(() => {
       TestBed.configureTestingModule({
-        imports: [MatBadgeModule],
-        declarations: [BadgeOnInteractiveElement, PreExistingBadge, NestedBadge, BadgeOnTemplate],
+        imports: [
+          MatBadgeModule,
+          BadgeOnInteractiveElement,
+          PreExistingBadge,
+          NestedBadge,
+          BadgeOnTemplate,
+        ],
       }).compileComponents();
 
       fixture = TestBed.createComponent(BadgeOnInteractiveElement);
@@ -227,8 +232,7 @@ describe('MatBadge', () => {
 
     beforeEach(async () => {
       await TestBed.configureTestingModule({
-        imports: [MatBadgeModule],
-        declarations: [BadgeOnNonInteractiveElement],
+        imports: [MatBadgeModule, BadgeOnNonInteractiveElement],
       }).compileComponents();
 
       fixture = TestBed.createComponent(BadgeOnNonInteractiveElement);
@@ -287,6 +291,8 @@ describe('MatBadge', () => {
       home
     </button>
   `,
+  standalone: true,
+  imports: [MatBadgeModule],
 })
 class BadgeOnInteractiveElement {
   @ViewChild(MatBadge) badgeInstance: MatBadge;
@@ -300,7 +306,11 @@ class BadgeOnInteractiveElement {
   badgeDisabled = false;
 }
 
-@Component({template: '<span matBadge="7" [matBadgeDescription]="description">Hello</span>'})
+@Component({
+  template: '<span matBadge="7" [matBadgeDescription]="description">Hello</span>',
+  standalone: true,
+  imports: [MatBadgeModule],
+})
 class BadgeOnNonInteractiveElement {
   description = '';
 }
@@ -312,6 +322,8 @@ class BadgeOnNonInteractiveElement {
       <div class="mat-badge-content">Pre-existing badge</div>
     </span>
   `,
+  standalone: true,
+  imports: [MatBadgeModule],
 })
 class PreExistingBadge {}
 
@@ -322,11 +334,15 @@ class PreExistingBadge {}
       <span matBadge="Hi">Something</span>
     </span>
   `,
+  standalone: true,
+  imports: [MatBadgeModule],
 })
 class NestedBadge {}
 
 @Component({
   template: `
     <ng-template matBadge="1">Notifications</ng-template>`,
+  standalone: true,
+  imports: [MatBadgeModule],
 })
 class BadgeOnTemplate {}

src/material/badge/badge.ts

@@ -58,6 +58,7 @@ const BADGE_CONTENT_CLASS = 'mat-badge-content';
     '[class.mat-badge-hidden]': 'hidden || !content',
     '[class.mat-badge-disabled]': 'disabled',
   },
+  standalone: true,
 })
 export class MatBadge implements OnInit, OnDestroy {
   /** The color of the badge. Can be `primary`, `accent`, or `warn`. */

src/material/badge/testing/badge-harness.spec.ts

@@ -11,8 +11,7 @@ describe('MatBadgeHarness', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MatBadgeModule],
-      declarations: [BadgeHarnessTest],
+      imports: [MatBadgeModule, BadgeHarnessTest],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BadgeHarnessTest);
@@ -127,6 +126,8 @@ describe('MatBadgeHarness', () => {
       matBadge="Disabled badge"
       [matBadgeDisabled]="disabled">Disabled</button>
   `,
+  standalone: true,
+  imports: [MatBadgeModule],
 })
 class BadgeHarnessTest {
   simpleContent = 'Simple badge';

tools/public_api_guard/material/badge.md

@@ -7,8 +7,8 @@
 import { AriaDescriber } from '@angular/cdk/a11y';
 import { ElementRef } from '@angular/core';
 import * as i0 from '@angular/core';
-import * as i2 from '@angular/cdk/a11y';
-import * as i3 from '@angular/material/core';
+import * as i1 from '@angular/cdk/a11y';
+import * as i2 from '@angular/material/core';
 import { NgZone } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
@@ -44,7 +44,7 @@ export class MatBadge implements OnInit, OnDestroy {
     position: MatBadgePosition;
     size: MatBadgeSize;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "color": { "alias": "matBadgeColor"; "required": false; }; "overlap": { "alias": "matBadgeOverlap"; "required": false; }; "disabled": { "alias": "matBadgeDisabled"; "required": false; }; "position": { "alias": "matBadgePosition"; "required": false; }; "content": { "alias": "matBadge"; "required": false; }; "description": { "alias": "matBadgeDescription"; "required": false; }; "size": { "alias": "matBadgeSize"; "required": false; }; "hidden": { "alias": "matBadgeHidden"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatBadge, "[matBadge]", never, { "color": { "alias": "matBadgeColor"; "required": false; }; "overlap": { "alias": "matBadgeOverlap"; "required": false; }; "disabled": { "alias": "matBadgeDisabled"; "required": false; }; "position": { "alias": "matBadgePosition"; "required": false; }; "content": { "alias": "matBadge"; "required": false; }; "description": { "alias": "matBadgeDescription"; "required": false; }; "size": { "alias": "matBadgeSize"; "required": false; }; "hidden": { "alias": "matBadgeHidden"; "required": false; }; }, {}, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatBadge, [null, null, null, null, { optional: true; }]>;
 }
@@ -56,7 +56,7 @@ export class MatBadgeModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatBadgeModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, [typeof i1.MatBadge], [typeof i2.A11yModule, typeof i3.MatCommonModule], [typeof i1.MatBadge, typeof i3.MatCommonModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatBadgeModule, never, [typeof i1.A11yModule, typeof i2.MatCommonModule, typeof i3.MatBadge], [typeof i3.MatBadge, typeof i2.MatCommonModule]>;
 }
 
 // @public