Add new Event

Add new Event

Finally, the last thing we have to do is to handle our form on submit and add new event to the list.

1. Add 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 see our new functions does four things

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 modal
2. Update the button in a Modal Footer with 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