[Feature] modal support use directive to define the footer

[hsuanxyz]

What problem does this feature solve?

What does the proposed API look like?

In Template

<nz-modal>
  <p>Content one</p>
  <p>Content two</p>
  <p>Content three</p>
  <div *nzModalFooter>
    <span>Modal Footer: </span>
    <button nz-button nzType="default" (click)="handleCancel()">Custom Callback</button>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Custom Submit</button>
  </div>
</nz-modal>

In nzContent component

createComponentModal(): void {
  const modal = this.modalService.create({
    nzTitle: 'Modal Title',
    nzContent: NzModalCustomComponent
  });
}
// ---

@Component({
  selector: 'nz-modal-custom-component',
  template: `
   <div>
     <p>Content one</p>
     <p>Content two</p>
     <p>Content three</p>
   </div>
   <div *nzModalFooter>
     <span>Modal Footer: </span>
     <button nz-button nzType="default" (click)="destroyModal()">Custom Callback</button>
   </div>
  `
})
export class NzModalCustomComponent {

  constructor(private modal: NzModalRef) { }

  destroyModal(): void {
    this.modal.destroy({ data: 'this the result data' });
  }
}

[levitatejay]

I'm trying to make a self contained modal component but having some issues... I'm currently doing the following in MyModalComponent:

# HTML
<ng-template #modalFooter>
   <button (click)="clickHandler()"> ...
</ng-template>

# TS
@ViewChild('modalFooter') public footerTemplate: TemplateRef<any>;

ngOnInit() {
   this.modal.getInstance().nzTitle = 'My Title';
   this.modal.getInstance().nzFooter = this.footerTemplate;
}

But this is causing the modal open animation to be janky because the header and footer aren't rendered until after the animation starts.

If I put this.modal.getInstance().nzFooter = this.footerTemplate; in the constructor instead of NgOnInit then the animation is smooth but the template onClick bindings aren't connected

Is there a better solution for this?