feat(module:badge): support standalone component (#8201)

* feat(module:badge): support standalone component

* feat(module:badge): support standalone component

Author: evgeniyefimov

components/badge/badge-sup.component.ts

@@ -3,6 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
+import { NgFor, NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -15,6 +16,7 @@ import {
 } from '@angular/core';
 
 import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
+import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
 
 @Component({
@@ -24,6 +26,8 @@ import { NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [zoomBadgeMotion],
+  standalone: true,
+  imports: [NgFor, NgIf, NzNoAnimationModule],
   template: `
     <ng-container *ngIf="count <= nzOverflowCount; else overflowTemplate">
       <span

components/badge/badge.component.ts

@@ -4,6 +4,7 @@
  */
 
 import { Direction, Directionality } from '@angular/cdk/bidi';
+import { NgIf, NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -26,9 +27,11 @@ import { takeUntil } from 'rxjs/operators';
 import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation';
 import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config';
 import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { BooleanInput, NzSafeAny, NzSizeDSType } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
+import { NzBadgeSupComponent } from './badge-sup.component';
 import { badgePresetColors } from './preset-colors';
 import { NzBadgeStatusType } from './types';
 
@@ -41,6 +44,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [zoomBadgeMotion],
+  standalone: true,
+  imports: [NgIf, NgStyle, NzBadgeSupComponent, NzOutletModule],
   template: `
     <ng-container *ngIf="nzStatus || nzColor">
       <span

components/badge/badge.module.ts

@@ -3,21 +3,13 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { ObserversModule } from '@angular/cdk/observers';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-
-import { NzBadgeSupComponent } from './badge-sup.component';
 import { NzBadgeComponent } from './badge.component';
 import { NzRibbonComponent } from './ribbon.component';
 
 @NgModule({
-  declarations: [NzBadgeComponent, NzBadgeSupComponent, NzRibbonComponent],
   exports: [NzBadgeComponent, NzRibbonComponent],
-  imports: [BidiModule, CommonModule, ObserversModule, NzOutletModule, NzNoAnimationModule]
+  imports: [NzBadgeComponent, NzRibbonComponent]
 })
 export class NzBadgeModule {}

components/badge/doc/index.en-US.md

@@ -27,7 +27,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 <nz-badge [nzCount]="5" nzStandalone></nz-badge>
 ```
 
-### nz-badge
+### nz-badge:standalone
 
 | Property | Description | Type | Default | Global Config |
 | -------- | ----------- | ---- | ------- | ------------- |
@@ -45,7 +45,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 | `[nzOffset]` | set offset of the badge dot, like[x, y] (Only Non-standalone) | `[number, number]` | - |
 
 
-### nz-ribbon
+### nz-ribbon:standalone
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |

components/badge/doc/index.zh-CN.md

@@ -28,7 +28,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 <nz-badge [nzCount]="5" nzStandalone></nz-badge>
 ```
 
-### nz-badge
+### nz-badge:standalone
 
 | 参数 | 说明 | 类型 | 默认值 | 全局配置 |
 | --- | --- | --- | --- | --- |
@@ -46,7 +46,7 @@ import { NzBadgeModule } from 'ng-zorro-antd/badge';
 | `[nzOffset]` | 设置状态点的位置偏移，格式为 [x, y] (非独立使用时) | `[number, number]` | - |
 
 
-### nz-ribbon
+### nz-ribbon:standalone
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |

components/badge/ribbon.component.ts

@@ -13,6 +13,8 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+
 import { badgePresetColors } from './preset-colors';
 
 @Component({
@@ -21,6 +23,8 @@ import { badgePresetColors } from './preset-colors';
   preserveWhitespaces: false,
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NzOutletModule],
   template: `
     <ng-content></ng-content>
     <div