Add new Event

Add new Event

Finally, the last thing we have to do is to handle our form when it is submitted and add a new event to the list.

1. Add this new function to app.component.ts
• app.component.ts

  addNewEvent() {
    const newEvent: any = {
      time: this.timeInput.value,
      subject: this.subjectInput.value,
      location: this.locationInput.value,
      description: this.descriptionInput.value
    };

    this.events.push(newEvent);

    this.timeInput.setValue('');
    this.subjectInput.setValue('');
    this.locationInput.setValue('');
    this.descriptionInput.setValue('');

    this.modal.hide();
  }

  

As you probably already have seen our new functions does four things, it:

1. Creates a newEvent object with values from the form
2. Adds the new object to the events array
3. Clears the form's inputs
4. Hides the modal
2. Update the button in a Modal Footer with a call to addNewEvent()
• app.component.html

<button
  type="button"
  mdbBtn
  color="info"
  class="waves-effect"
  (click)="addNewEvent()"
  mdbWavesEffect
>
  Add
</button>

  

3. Save and test the app