Add new Event

Author: Dawid Adach

-

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
  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 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

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

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Sign up to follow your progress and get additional benefits