How to make asyn false like ajax in angular 7

Question

In my project, i have a full calendar with loading events dynamically from database. When i try to add events into the calendar.But it did not works for me because of httpget method synchronize problem i think. I cannot resolve the issue.

 this.events = [];
    this.holidayList = [];
    //this._holidayService.getHolidayArray().then(events => { this.events = events; });
    this._holidayService.getHolidayArray().subscribe((result: any[]) => {
      for (let i = 0; i < result.length; i++) {
        this.events.push({ "title": result[i].title, "start": result[i].start });
        //this.holidayModel = new Holiday;
        //this.holidayModel.start = result[i].start;
        //this.holidayModel.title = result[i].title;
        //this.holidayList.push(this.holidayModel);
      }
      //this.events = this.holidayList;
    });


 this.options = {
      plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      selectable: true,
      selectMirror: true,
      select: function (arg) {
        var start = arg.start.toString();
          var date = start.slice(8, 10);
          var year = start.slice(11, 15);
          var month = start.slice(4, 7);
          if (month === "Jan") month = '01';
          if (month === "Feb") month = '02';
          if (month === "Mar") month = '03';
          if (month === "Apr") month = '04';
          if (month === "May") month = '05';
          if (month === "Jun") month = '06';
          if (month === 'Jul') month = '07';
          if (month === 'Aug') month = '08';
          if (month === 'Sep') month = '09';
          if (month === 'Oct') month = '10';
          if (month === 'Nov') month = '11';
        if (month === 'Dec') month = '12';
        var fullDate = month + '/' + date + '/' + year;
          $("#holiday").val(fullDate);
          document.getElementById("btnCreate").innerHTML = "Save";
          document.getElementById("description").innerHTML = "";
          $('#description').val("");
          $("#toggler")[0].click();
          //calendar.unselect()
       },
      defaultDate: '2019-07-01',
      header: {
        left: 'prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
      },
      events: this.events

    }
  }


  getHolidayArray() {
    return this.ExecuteGet("api/HolidayCalendar/GetTitles");
  }

If i try

this._holidayService.getHolidayArray().then(events => { this.events = events; });

an error "then doesn't exist on type observable"

Answer 1

See the 'Change Detection' section of the link you posted (https://www.primefaces.org/primeng/#/fullcalendar). You cannot just push into the events array. Instead try creating this.events afresh after your loop.

this._holidayService.getHolidayArray().subscribe((result: any[]) => {
  const events = [];
  for (let i = 0; i < result.length; i++) {
    events.push({ "title": result[i].title, "start": result[i].start });
  }
  this.events = [...this.events, ...events];
});