Support emit event from Custom Component

[merobal]

This connects the emit event functionality with an Angular component.

Inside the Custom Angular Component, implement as the following:

@Output()
formioEvent = new EventEmitter<FormioEvent>();

And emit an event like:

this.formioEvent.emit({ eventName: 'submitButton', data: { state: 'submitted' } });

This will use the formio emit functionality like:

this.emit('submitButton', {
  state: 'submitted',
  component: this.component
});

The code behind it looks like:

this._customAngularElement.addEventListener('formioEvent', (event: CustomEvent<FormioEvent>) => {
  this.emit(event.detail.eventName, {
    ...event.detail.data,
    component: this.component
  });
});

Note: the formio component class behind the Custom Component is automatically attached.

Closes #434

[jftsaraiva]

@merobal

How can I catch this event?

With this:

<formio [form]='formSrc' [submission]='model' [readOnly]='historyMode' [options]='options'
    (customEvent)="customEvent($event)" ></formio>

I can catch others custom events from, by example, an button.

But it doesn't catch when I emit this:

this.formioEvent.emit({ eventName: 'viewer', data: { url: 'assets/docs/a.pdf' } });

What i'm missing?

[ajaykumarsana]

@jftsaraiva
I've had a similar problem, Did you find any solution?
Please help.

@merobal
this.formioEvent.emit({ eventName: 'viewer', data: { url: 'assets/docs/a.pdf' } });

this event is not getting catch in CustomEvent method
<formio [form]='formSrc' [submission]='model' [options]='options' (customEvent)="customEvent($event)" ></formio>

Please help.
Thanks a Lot.

[alyalin]

@jftsaraiva I've had a similar problem, Did you find any solution? Please help.

@merobal this.formioEvent.emit({ eventName: 'viewer', data: { url: 'assets/docs/a.pdf' } });

this event is not getting catch in CustomEvent method <formio [form]='formSrc' [submission]='model' [options]='options' (customEvent)="customEvent($event)" ></formio>

Please help. Thanks a Lot.

Hi. I think (customEvent) firing when you emit it from component with eventName: 'customEvent' and nothing else.

For example:
this.formioEvent.emit({ eventName: 'customEvent', data: { hello: 'world' } });