Ionic 2 calendar eventsource property binding doesn't update the view

Question

I'm new to ionic/angular/TS and I'm trying to create a calendar with the ability to set appointments (events) and edit/delete them. I'm using a modal to edit the selected event and this modal has the delete event button. for now I'm storing the added events in an object array in a provider. Adding, editing deleting function as well as fetch all events function is in this provider. as shown below,

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

/*
  Generated class for the AppointmentServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class AppointmentServiceProvider {
  currentId: number;
  events: { id: number, title: string, startTime: string,endTime: string, allDay:boolean }[];
  constructor(public http: HttpClient) {
    this.currentId = 0;
    this.events =[];
  }
  getCurrentId(): number{
    console.log("in get curr");
    if(this.events == null){
      console.log("in curr null");
      return 0;
    }else{
      console.log("in curr not null");
      if(this.events.length == 0){
        return 0;
      }else{
        return this.events.slice().sort((a, b) => a.id-b.id)[this.events.length-1].id;
      }

    }

  }

  addEvent(event: { id: number, title: string, startTime: string, endTime: string, allDay:boolean }){
    //let eventLength = this.events.length; 
  let pos = this.events.map(function(e) { return e.id; }).indexOf(event.id);

    if(pos == -1){
      this.events.push(event);

    }else{
      this.events[pos] = event;
    }

    //console.log(event);
    //console.log(this.events.length);
  }
deleteEvent(eventId:number){
  let pos = this.events.map(function(e) { return e.id; }).indexOf(eventId);
  this.events.splice(pos,1);
}
  getAllEvents():{ id: number, title: string, startTime: string,endTime: string, allDay:boolean }[]{
  console.log("in get all" + this.events.length);

  return this.events;
  }
}

When I click delete, the item gets removed from the array in the provider (as evident from console logs). however, my view still shows the deleted event. This is my page view with the calendar,

 <calendar [eventSource]="eventSource"
  [calendarMode]="calendar.mode"
  [currentDate]="calendar.currentDate"
  (onEventSelected)="onEventSelected($event)"
  (onTitleChanged)="onViewTitleChanged($event)"
  (onTimeSelected)="onTimeSelected($event)"
  step="30"
  class="calendar">
</calendar>

the TS backing this is,

export class AppointmentPage {
  eventSource:{ id: number, title: string, startTime: string,endTime: string, allDay:boolean }[] = [];
  viewTitle: string;
  selectedDay = new Date();

  calendar = {
    mode: 'month',
    currentDate: new Date()
  };

  constructor(public navCtrl: NavController, private modalCtrl: ModalController, private alertCtrl: AlertController, public eventService: AppointmentServiceProvider) { 
    this.eventSource = eventService.getAllEvents();
  }

 editEvent(selectedEvent){
   console.log(selectedEvent);
  let modal = this.modalCtrl.create('EventModalPage', {eventTitle: selectedEvent.title, 
                                                          eventId: selectedEvent.id, 
                                                          eventStartTime:selectedEvent.startTime, 
                                                          eventEndTime: selectedEvent.endTime,
                                                          eventAllDay: selectedEvent.allDay,
                                                          type:1});
  modal.present();
  modal.onDidDismiss(data => {
    console.log("after delete outside data block.");
    this.eventSource = [];
    this.eventSource = this.eventService.getAllEvents();
    console.log(this.eventSource);
    this.eventSource = this.eventService.getAllEvents();
    // if(data == null){
    //   this.eventSource = [];
    //   this.eventSource = this.eventService.getAllEvents();

    //   // *** Check this, wont refresh after delete
    // }
    if (data) {
      console.log("after delete in the data block. Data:" +data);
      let eventData = data;
      //eventData.id= this.eventService.getCurrentId()+1;
      eventData.id = data.id;
      eventData.title = data.title;
      eventData.allDay = data.allDay;
      eventData.startTime = new Date(data.startTime);
      eventData.endTime = new Date(data.endTime);

      //let events = this.eventSource;
      this.eventService.addEvent(eventData);
      //events.push(eventData);
      this.eventSource = [];
      // this.eventSource = this.eventService.getAllEvents();
      setTimeout(() => {
        this.eventSource = this.eventService.getAllEvents();
      });
    }
  });
 }
 }

In the modal, the delete button calls the function,

delete(){
    let confirm = this.alertCtrl.create({
      title: "Please confirm",
      message: "Are you sure you want to delete this appointment?",
      enableBackdropDismiss: false ,
      buttons: [
          {
            text: 'Yes',
             handler: data => {
                   this.eventService.deleteEvent(this.event.id);
                  // this.eventService.getAllEvents();
                   this.viewCtrl.dismiss(null);
            }
          },
          {
            text: 'No',
           handler: data => {

            }
          }
        ]
  });

  confirm.present();
  }

Why isn't the eventsource being refreshed?

Answer 1

Finally was able to solve it. ionic2-calendar github has an event to load the events forcefully and it is necessary if events are changed manually. added the following to refer the calendar in TS file and called loadEvents function on it to refresh the view.

import { ViewChild } from '@angular/core';

export class AppointmentPage {
  @ViewChild(CalendarComponent) myCalendar:CalendarComponent;

 editEvent(selectedEvent){
   console.log(selectedEvent);
  let modal = this.modalCtrl.create('EventModalPage', {eventTitle: selectedEvent.title, 
                                                          eventId: selectedEvent.id, 
                                                          eventStartTime:selectedEvent.startTime, 
                                                          eventEndTime: selectedEvent.endTime,
                                                          eventAllDay: selectedEvent.allDay,
                                                          type:1});
  modal.present();
  modal.onDidDismiss(data => {
    console.log("after delete outside data block.");
    this.eventSource = [];
    this.eventSource = this.eventService.getAllEvents();


    this.eventSource = this.eventService.getAllEvents();
    this.myCalendar.loadEvents();   // <== added this after updating eventSource

    if (data) {
      console.log("after delete in the data block. Data:" +data);
      let eventData = data;
      //eventData.id= this.eventService.getCurrentId()+1;
      eventData.id = data.id;
      eventData.title = data.title;
      eventData.allDay = data.allDay;
      eventData.startTime = new Date(data.startTime);
      eventData.endTime = new Date(data.endTime);

      //let events = this.eventSource;
      this.eventService.addEvent(eventData);
      //events.push(eventData);
      this.eventSource = [];
      // this.eventSource = this.eventService.getAllEvents();
      setTimeout(() => {
        this.eventSource = this.eventService.getAllEvents();
      });
    }
  });
 }
}

That fixed the problem. Now the deleted events get removed right away.