Support @Output() : EventEmitter in NzDrawerService

[ameckl]

What problem does this feature solve?

The current implementation of NzDrawerService allows to pass @input() parameters for the component using NzContentParams, but does not allow to pass functions acting as callbacks when the component emits an event.

One can argue that the afterClose method can be used as an emitter, which I'm currently using. My only problem with this, in order to close the drawer from inside, I need to inject 'NzDrawerRef' into the component, but I don't always render that component using a drawer.

If NzDrawerService would support @output() parameters, one could create a drawer with a component that has zero reference to the drawerRef.

This is how I'm using it now:

createOrEditTeam(teamToEdit: Team) {
    const title = teamToEdit ? `Edit ${teamToEdit.name}` : `Create new Team`;
    this.drawerService.create({
      nzContent: CreateTeamComponent,
      nzTitle: title,
      nzPlacement: this.mqAlias === 'xs' ? 'bottom' : 'right',
      nzHeight: this.mqAlias === 'xs' ? '75%' : '100%',
      nzWidth: this.mqAlias === 'xs' ? '100%' : '50%',
      nzContentParams: {
        team: teamToEdit
      },
      nzBodyStyle: {
        overflow: 'hidden scroll',
        height: this.mqAlias === 'xs' ? '50vh' : '100%',
        marginBottom: '54px',
        padding: '8px'
      }
    }).afterClose.subscribe((result: Team) => {
      if (result) {
        this.fetchData();
      }
    });
}

What does the proposed API look like?

this.editDrawer = this.nzDrawerService.create({
   nzContent: MyEditComponent,
   nzInputParams: {  //  nzContentParams
       objectToEdit: this.objectToEdit
   },
   nzOutputParams: {  //  supporting now @Output()
       submit: this.onSubmit
   }
});


this.onSubmit(modifiedObject: MyObject) {
    console.log('Submit event emitted on edit drawer');
    if (this.editDrawer) {
        this.editDrawer.close();
    }
}

[hsuanxyz]

@ameckl You can use Subject.

https://stackblitz.com/edit/angular-cgaitc?embed=1&file=src/app/app.component.ts

[ameckl]

Thank you for response. I'll refactor my code. It just seemed more right and idiomatic to use EventEmitter instead of Subject.

[Yukimir]

Maybe we can add component instance as a property of drawerRef
Like

/// myComponent.ts
@Component({
  selector: 'app-my-component',
  template: `...`
})
export class MyComponent {
  @Input() value = '';
  @Output() someEvent = new EventEmitter();
  constructor() {}
  onClose(){
    this.someEvent.emit();
  }
}

/// some-component-use-drawer.ts
    const drawerRef = this.drawerService.create<MyComponent>({
      nzContent: CreateClientComponent,
      nzContentParams: {
        value:"yeah"
      },
    });
// add a property 'content' which instanceof CreateClientComponent
    drawerRef.content.someEvent.subscribe(....)

[hsuanxyz]

@Yukimir It's a good idea #5489

[matigodoy]

If everyone else was in my position triying to use this in a DrawerService and didn't make it work, you can solve it by using "componentInstance" property.
It should look something like this:

public signDocument(documentId: string) {
    const drawerRef = this.modalService.create({
      nzTitle: undefined,
      nzCloseIcon: 'close',
      nzContent: SignOptionsComponent,
      nzWidth: '60%',
      nzFooter: null,
      nzOkType: undefined,
      nzComponentParams: {
        documentId: documentId,
      },
    });

    drawerRef.componentInstance?.onSignEvent.subscribe((event: any) => {
      if (event == true) {
        drawerRef.close();
      }
    });
  } 

in my case "onSignEvent" is an output declared as a EventEmiiter in my component

[sangnguyendev]

That's right, the drawerRef.afterClose event won't receive any data without a button with close.
You can emit data when a button is pressed