Modal

API#

NzModalServiceservice#

The dialog is currently divided into 2 modes, normal mode and confirm box mode (for instance, the Confirm dialog, which is called by confirm/info/success/error/warning). The degree of API support for the two modes is slightly different.

NZ_MODAL_DATA#

NZ_MODAL_DATA injection token is used to retrieve nzData in the custom component. The dialog created by the service method NzModalService.create() inject a NZ_MODAL_DATA token (if nzContent is used as Component) to retrieve the parameters that have used to the 'nzContent component'

Using service to create Normal Mode modal#

You can call NzModalService.create(options) to dynamically create normal mode modals, where options is an object that supports the support given in the API above normal mode parameters

Confirm box mode - NzModalService.method()#

There are five ways to display the information based on the content's nature:

• NzModalService.info
• NzModalService.success
• NzModalService.error
• NzModalService.warning
• NzModalService.confirm

The above items are all functions, expecting a settings object as a parameter. Consistent with the above API, some property types or initial values are different as follows:

All the NzModalService.methods will return a reference, and then we can close the popup by the reference.

constructor(modal
:
NzModalService
)
{
  const ref: NzModalRef = modal.info();
  ref.close(); // Or ref.destroy(); This dialog will be destroyed directly
}

Related type definition#

Other Methods/Attributes for NzModalService#

NzModalRef#

NzModalRef object is used to control dialogs and communicate with their content

The dialog created by the service method NzModalService.xxx() will return a NzModalRef object that is used to manipulate the dialog (this object can also be obtained by dependency injection NzModalRef if nzContent is used as Component), This object has the following methods:

ModalButtonOptions (used to customize the bottom button)#

An array of ModalButtonOptions type can be passed to nzFooter for custom bottom buttons.

The button configuration items are as follows (along with the button component):

nzFooter: [{
  label: string; // Button text
  type? : string; // Types
  danger? : boolean; // Whether danger
  shape? : string; // Shape
  ghost? : boolean; // Whether ghost
  size? : string; // Size
  autoLoading? : boolean; // The default is true. If true, this button will automatically be set to the loading state when onClick returns a promise.

  // Tip: The `this` of below methods points to the configuration object itself. When nzContent is a component class, the contentComponentInstance parameter passed in by the method below is an instance of the component class
  // Whether to show this button
  show? : boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // Whether to display loading
  loading? : boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // Is it disabled
  disabled? : boolean | ((this: ModalButtonOptions, contentComponentInstance?: object) => boolean);
  // Callback of clicking
  onClick? (this: ModalButtonOptions, contentComponentInstance?: object): void | Promise<void> | any;
}]

The above configuration items can also be changed in real-time to trigger the button behavior change.

[nzModalTitle]directive#

Customize the title.

<div *nzModalTitle> Custom Modal Title</div>

<!-- or -->

<ng-template [nzModalTitle]> Custom Modal Title</ng-template>

[nzModalContent]directive#

Customize the content.

<div *nzModalContent> Custom Modal Content</div>

<!-- or -->

<ng-template [nzModalContent]> Custom Modal Content</ng-template>

[nzModalFooter]directive#

Customize the footer.

<div *nzModalFooter>
  <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
</div>

<!-- or -->

<ng-template [nzModalFooter]>
  <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
  <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
</ng-template>