Modal Helper

Based on the NzModalService package, it solves some known issues:

  • More friendly handling callbacks

Usage

this.modalHelper.create(FormEditComponent, { i }).subscribe(res => this.load());

// Ok callback, Where `nzModalRef` refers to the variable name of the target component in the constructor `NzModalRef`
// 1. considered successful
this.nzModalRef.close(true);
this.nzModalRef.close({ other: 1 });
// 2. considered error
this.nzModalRef.close();

// Close
this.nzModalRef.destroy();

There are includes create & createStatic methods to open the normal & static modal. Add a few parameters based on NzModalService.

Custom component HTML template

<div class="modal-header">
  <div class="modal-title">Title</div>
</div>

Your body content

<div class="modal-footer">
  <button nz-button [nzType]="'default'" (click)="cancel()">
    Cancel
  </button>
  <button nz-button [nzType]="'primary'" (click)="ok()">
    OK
  </button>
</div>

API

PropertyDescriptionTypeDefault
sizeSpecify modal sizesm,md,lg,xl,numberlg
exactExact match return value, default is true, If the return value is not null (null or undefined) is considered successful, otherwise it is considered error.booleantrue
includeTabsWhether to wrap the tab pagebooleanfalse
modalOptionsnz-modal raw parameters ModalOptionsModalOptions-

Examples

Basic Usage

Simplest of usage.

expand codeexpand code
import { Component } from '@angular/core';
import { ModalHelper } from '@delon/theme';
import { DemoModalComponent } from '@shared';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'theme-modal-simple',
  template: `
    <button nz-button (click)="open()">Open</button>
    <button nz-button (click)="static()">Static</button>
  `,
})
export class ThemeModalSimpleComponent {
  constructor(private modalHelper: ModalHelper, private msg: NzMessageService) {}

  open(): void {
    this.modalHelper.create(DemoModalComponent, { record: { a: 1, b: '2', c: new Date() } }).subscribe(res => {
      this.msg.info(res);
    });
  }

  static(): void {
    this.modalHelper.createStatic(DemoModalComponent, { record: { a: 1, b: '2', c: new Date() } }).subscribe(res => {
      this.msg.info(res);
    });
  }
}