Modal

API#

NzModalServiceservice#

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

Attentions#

The default state of <nz-modal> will not be automatically cleared. If you wish to open new content each time, use the NzModalService service to create modals (when created as a service, the nzAfterClose event will be listened by default aim to destroy the modal).

Modals created through the NzModalService service need you to manage their own life cycle. For example, when you switch the page route, the modal box created by service will not be destroyed automatically. You need to use the modal box's reference to manually destroy it (NzModalRef.close() or NzModalRef.destroy()).

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 items listed above are all functions, expecting a settings object as 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(); 
}

Related type definition#

Other Methods/Attributes for NzModalService#

NzModalRef#

NzModalRef object is used to control dialogs and communicate with inside 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
  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.

[nzModalFooter]directive#

Another way to customize the footer button.

<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>