Emitting Events
Understand how to emit custom events from child components to communicate with parent components in Angular. Learn to control modal visibility by listening for emitted events and prevent unwanted modal closure using event.stopPropagation.
We'll cover the following...
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.