Add new Event

web
mobile

Author: Dawid Adach

-

Streaming now live

HTML, CSS - free educational webinar for your quarantaine.

WATCH NOW

Free live lesson

Learn HTML, CSS & JavaScript fundamentals. Join now, and don't miss the livestream.

JOIN NOW

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

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