feat(module:modal): support standalone component (#8240)

* feat(module:modal): support standalone component

* feat(module:modal): support standalone component

* feat(module:modal): support standalone component

Author: ParsaArvanehPA

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

@@ -5,6 +5,9 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
 import { ModalOptions } from './modal-types';
 
 @Component({
@@ -21,7 +24,9 @@ import { ModalOptions } from './modal-types';
     class: 'ant-modal-close',
     'aria-label': 'Close'
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NzIconModule, NzOutletModule],
+  standalone: true
 })
 export class NzModalCloseComponent {
   constructor(public config: ModalOptions) {}

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

@@ -5,8 +5,8 @@
 
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import { OverlayRef } from '@angular/cdk/overlay';
-import { CdkPortalOutlet } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
+import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { DOCUMENT, NgClass, NgIf, NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -24,11 +24,16 @@ import {
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 import { takeUntil } from 'rxjs/operators';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzConfigService } from 'ng-zorro-antd/core/config';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { NzI18nService, NzModalI18nInterface } from 'ng-zorro-antd/i18n';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
 
 import { nzModalAnimations } from './modal-animations';
+import { NzModalCloseComponent } from './modal-close.component';
 import { BaseModalContainerComponent } from './modal-container.directive';
 import { ModalOptions } from './modal-types';
 
@@ -104,7 +109,19 @@ import { ModalOptions } from './modal-types';
     '(@modalContainer.start)': 'onAnimationStart($event)',
     '(@modalContainer.done)': 'onAnimationDone($event)',
     '(click)': 'onContainerClick($event)'
-  }
+  },
+  imports: [
+    NgClass,
+    NgStyle,
+    NzPipesModule,
+    NzIconModule,
+    NgIf,
+    NzModalCloseComponent,
+    NzOutletModule,
+    PortalModule,
+    NzButtonModule
+  ],
+  standalone: true
 })
 export class NzModalConfirmContainerComponent extends BaseModalContainerComponent implements OnInit {
   @ViewChild(CdkPortalOutlet, { static: true }) override portalOutlet!: CdkPortalOutlet;

components/modal/modal-close.component.ts

@@ -5,8 +5,8 @@
 
 import { FocusTrapFactory } from '@angular/cdk/a11y';
 import { OverlayRef } from '@angular/cdk/overlay';
-import { CdkPortalOutlet } from '@angular/cdk/portal';
-import { DOCUMENT } from '@angular/common';
+import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import { DOCUMENT, NgClass, NgIf, NgStyle } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -23,9 +23,13 @@ import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
 
 import { NzConfigService } from 'ng-zorro-antd/core/config';
 import { NzSafeAny } from 'ng-zorro-antd/core/types';
+import { NzPipesModule } from 'ng-zorro-antd/pipes';
 
 import { nzModalAnimations } from './modal-animations';
+import { NzModalCloseComponent } from './modal-close.component';
 import { BaseModalContainerComponent } from './modal-container.directive';
+import { NzModalFooterComponent } from './modal-footer.component';
+import { NzModalTitleComponent } from './modal-title.component';
 import { ModalOptions } from './modal-types';
 
 @Component({
@@ -72,7 +76,18 @@ import { ModalOptions } from './modal-types';
     '(@modalContainer.start)': 'onAnimationStart($event)',
     '(@modalContainer.done)': 'onAnimationDone($event)',
     '(click)': 'onContainerClick($event)'
-  }
+  },
+  imports: [
+    NgClass,
+    NgStyle,
+    NgIf,
+    NzModalCloseComponent,
+    NzModalTitleComponent,
+    PortalModule,
+    NzModalFooterComponent,
+    NzPipesModule
+  ],
+  standalone: true
 })
 export class NzModalContainerComponent extends BaseModalContainerComponent implements OnInit {
   @ViewChild(CdkPortalOutlet, { static: true }) override portalOutlet!: CdkPortalOutlet;

components/modal/modal-confirm-container.component.ts

@@ -7,7 +7,8 @@ import { Directive, TemplateRef } from '@angular/core';
 
 @Directive({
   selector: '[nzModalContent]',
-  exportAs: 'nzModalContent'
+  exportAs: 'nzModalContent',
+  standalone: true
 })
 export class NzModalContentDirective {
   constructor(public templateRef: TemplateRef<{}>) {}

components/modal/modal-container.component.ts

@@ -3,10 +3,13 @@
  * 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, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
 import { isPromise } from 'ng-zorro-antd/core/util';
 import { NzI18nService, NzModalI18nInterface } from 'ng-zorro-antd/i18n';
 
@@ -69,7 +72,9 @@ import { ModalButtonOptions, ModalOptions } from './modal-types';
   host: {
     class: 'ant-modal-footer'
   },
-  changeDetection: ChangeDetectionStrategy.Default
+  changeDetection: ChangeDetectionStrategy.Default,
+  imports: [NgIf, NzOutletModule, NgFor, NzButtonModule],
+  standalone: true
 })
 export class NzModalFooterComponent implements OnDestroy {
   buttonsFooter = false;

components/modal/modal-content.directive.ts

@@ -9,7 +9,8 @@ import { NzModalRef } from './modal-ref';
 
 @Directive({
   selector: '[nzModalFooter]',
-  exportAs: 'nzModalFooter'
+  exportAs: 'nzModalFooter',
+  standalone: true
 })
 export class NzModalFooterDirective {
   constructor(@Optional() private nzModalRef: NzModalRef, public templateRef: TemplateRef<{}>) {

components/modal/modal-footer.component.ts

@@ -5,6 +5,8 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
+
 import { ModalOptions } from './modal-types';
 
 @Component({
@@ -20,7 +22,9 @@ import { ModalOptions } from './modal-types';
   host: {
     class: 'ant-modal-header'
   },
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [NzOutletModule],
+  standalone: true
 })
 export class NzModalTitleComponent {
   constructor(public config: ModalOptions) {}

components/modal/modal-footer.directive.ts

@@ -9,7 +9,8 @@ import { NzModalRef } from './modal-ref';
 
 @Directive({
   selector: '[nzModalTitle]',
-  exportAs: 'nzModalTitle'
+  exportAs: 'nzModalTitle',
+  standalone: true
 })
 export class NzModalTitleDirective {
   constructor(@Optional() private nzModalRef: NzModalRef, public templateRef: TemplateRef<{}>) {

components/modal/modal-title.component.ts

@@ -38,7 +38,8 @@ import { getConfigFromComponent } from './utils';
   selector: 'nz-modal',
   exportAs: 'nzModal',
   template: ``,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true
 })
 export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
   implements OnChanges, NzModalLegacyAPI<T, R>, OnDestroy

components/modal/modal-title.directive.ts

@@ -3,19 +3,8 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { BidiModule } from '@angular/cdk/bidi';
-import { OverlayModule } from '@angular/cdk/overlay';
-import { PortalModule } from '@angular/cdk/portal';
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NzButtonModule } from 'ng-zorro-antd/button';
-import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
-import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
-import { NzI18nModule } from 'ng-zorro-antd/i18n';
-import { NzIconModule } from 'ng-zorro-antd/icon';
-import { NzPipesModule } from 'ng-zorro-antd/pipes';
-
 import { NzModalCloseComponent } from './modal-close.component';
 import { NzModalConfirmContainerComponent } from './modal-confirm-container.component';
 import { NzModalContainerComponent } from './modal-container.component';
@@ -29,21 +18,6 @@ import { NzModalService } from './modal.service';
 
 @NgModule({
   imports: [
-    CommonModule,
-    BidiModule,
-    OverlayModule,
-    NzOutletModule,
-    PortalModule,
-    NzI18nModule,
-    NzButtonModule,
-    NzIconModule,
-    NzPipesModule,
-    NzNoAnimationModule,
-    NzPipesModule
-  ],
-  exports: [NzModalComponent, NzModalFooterDirective, NzModalContentDirective, NzModalTitleDirective],
-  providers: [NzModalService],
-  declarations: [
     NzModalComponent,
     NzModalFooterDirective,
     NzModalContentDirective,
@@ -52,8 +26,9 @@ import { NzModalService } from './modal.service';
     NzModalTitleComponent,
     NzModalTitleDirective,
     NzModalContainerComponent,
-    NzModalConfirmContainerComponent,
-    NzModalComponent
-  ]
+    NzModalConfirmContainerComponent
+  ],
+  exports: [NzModalComponent, NzModalFooterDirective, NzModalContentDirective, NzModalTitleDirective],
+  providers: [NzModalService]
 })
 export class NzModalModule {}