Drawer Helper

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

  • More friendly handling callbacks

  • Support responsive

create

this.drawerHelper.create('Edit', FormEditComponent, { i }).subscribe(res => this.load());
// Ok callback
// 1. considered successful
this.NzDrawerRef.close(data);
this.NzDrawerRef.close(true);

// Close
this.NzDrawerRef.close();
this.NzDrawerRef.close(false);

There are includes create & static methods to open the normal & static drawer.

Custom component HTML template

Your body content
<div class="drawer-footer">
  // The bottom toolbar need wrapped by `drawer-footer`
  <button nz-button [nzType]="'default'" (click)="cancel()">
    Cancel
  </button>
  <button nz-button [nzType]="'primary'" (click)="ok()">
    OK
  </button>
</div>

If you don't bottom toolbar, you need specify footer: false.

Examples

Basic Usage

Simplest of usage.

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

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

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

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

API

PropertyDescriptionTypeDefault
sizeSpecify drawer size, responsive only supports non-numeric valuessm,md,lg,xl,numbermd
footerWhether toolbarbooleantrue
footerHeightToolbar heightnumber55
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
drawerOptionsDrawer raw parameters NzDrawerOptions 参数NzDrawerOptions-