Opening the Modal

Currently, the modal is, by default, opened when we visit the contact page. We’ll want to change this behavior by opening the modal when the form is submitted. We’ll also need a way to close the modal besides navigating to a different page.

We’ll start by opening the modal. It’s going to be rather simple to toggle its visibility. We’ll use the ngIf directive to help us add/remove the ModalComponent.

Form submission

We’ll start by listening to the submit event on the <form> element in the contact-main.component.html file.

<form (submit)="onSubmit($event)">

If the form is submitted, we’ll run a function called onSubmit(). Every time we listen to an event, we’ll be provided an object called $event. The $event object is the regular event object in JavaScript. We’re passing it to the function because we want to be able to stop the default behavior of refreshing the page.

Next, let’s handle the event in the contact-main.component.ts file.