Emitting Events

The modal needs to be closed on one of three scenarios. On the header and footer, there are close buttons that we’ll want to make functional. The third scenario is if the visitor clicks outside of the modal.

At the moment, toggling the modal’s visibility is controlled by the parent component. The ContactMainComponent is storing a property for toggling its visibility. We want to be able to call the onSubmit() function on the ContactMainComponent. This is where the property’s value is flipped.

The question is: how do we call a parent’s component function from a child component? We can do so by emitting events.

EventEmitter

We can create custom events that we can emit from the child component. The parent component will be able to listen to those events. If the event is emitted, we’ll toggle the modal’s visibility.

The first thing we’ll do is listen for click events on the three areas that can cause the modal to close. We’ll update the modal.component.html file.