Author: Dawid Adach
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.
- Add this new function to
app.component.ts
- Creates a newEvent object with values from the form
- Adds the new object to the events array
- Clears the form's inputs
- Hides the modal
- Update the button in a Modal Footer with a call to addNewEvent()
- Save and test the app
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:
<button
type="button"
mdbBtn
color="info"
class="waves-effect"
(click)="addNewEvent()"
mdbWavesEffect
>
Add
</button>

Previous lesson Next lesson
Spread the word:
