Add new Event

web
mobile

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.

  1. Add this new function to app.component.ts
  2. 
      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

  3. Update the button in a Modal Footer with a call to addNewEvent()
  4. 
    <button
      type="button"
      mdbBtn
      color="info"
      class="waves-effect"
      (click)="addNewEvent()"
      mdbWavesEffect
    >
      Add
    </button>
    
      
  5. Save and test the app
  6. Add new event

Rate this lesson

Previous lesson Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...