I don't know if it is possible to call a typescript inside a jquery function. if it is possible, what is the right method to do it?

this my ponent.ts

getCalendar(){
  calendarOptions:Object = {
    height: 'parent',
    fixedWeekCount : false,
    defaultDate: '2017-03-01',
    editable: true,
    eventLimit: true, // allow "more" link when too many 

dayclick function

    dayClick: function(date, jsEvent, view) {
       this.addModal(); **this function is not working**

        //console.log(jsEvent);
        // alert('Clicked on: ' + date.format());
        // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        // alert('Current view: ' + view.name);
      },

    success: function(doc) {
        var events = [];
        $(doc).find('event').each(function() {
            events.push({
                title: $(this).attr('title'),
                start: $(this).attr('start') // will be parsed
            });
        });
    },

    eventAllow: function(dropLocation, draggedEvent) {
      if (draggedEvent.id === '999') {
        return dropLocation.isAfter('2017-03-22'); // a boolean
      }
      else {
        return true;
      }
    }
  };

    ngOnInit() {
      this.getTotalEmployee();
      this.getComputeAbsent();
      this.getTotalAttendance();
      // this.showEvent();
      this.calendarOptions['events'] = this.events;

    }



     public catchError(error: any) {
         let response_body = error._body;
          let response_status = error.status;

          if( response_status == 500 ){
            this.error_title = 'Error 500';
            this.error_message = 'The given data failed to pass validation.';
          } else if( response_status == 200 ) {
            this.error_title = '';
            this.error_message = '';
          }

        }

     showEvent(){
       this._event_service.getEventList()
       .subscribe(
          data => {
          this.events = Array.from(data);
          this.calendarOptions['events'] = this.events;
          console.log(this.calendarOptions['events']);

          },
          err => this.catchError(err)

      );
      }


    getEvents() {
       this._event_service.getEvents().subscribe(
        data => {
          this.eventsList = Array.from(data); 
          this.calendarOptions['events'] = this.eventsList;

        },
        err =>{}
      );
    }

this is my modal function that im trying to call in jquery function above

   addModal() {
    let disposable = this.modalService.addDialog(EventComponent, {
            title:'Add Event'
          }).subscribe((isConfirmed)=>{
      });
    }
    getTotalAttendance() {
      let pre;
       this._attend_service.getTotalPresent().subscribe(
        data => {
          pre = Array.from(data);
          this.present = pre[0].total_present;

        },
        err =>{}
      );
    }

    getTotalEmployee() {
      let totalEmp;
      let filter = "Active";
       this._attend_service.getTotalEmp(filter).subscribe(
        data => {
          totalEmp = data; // fetced record
          this.total_emp = totalEmp[0].total_employee;

        },
        err =>{}
      );
    }

    getComputeAbsent(){
        let employee = parseInt(this.employee);
        let attendance = parseInt(this.attendance);

          this.totalAbsent = employee - attendance;


      }

I don't know if it is possible to call a typescript inside a jquery function. if it is possible, what is the right method to do it?

this my ponent.ts

getCalendar(){
  calendarOptions:Object = {
    height: 'parent',
    fixedWeekCount : false,
    defaultDate: '2017-03-01',
    editable: true,
    eventLimit: true, // allow "more" link when too many 

dayclick function

    dayClick: function(date, jsEvent, view) {
       this.addModal(); **this function is not working**

        //console.log(jsEvent);
        // alert('Clicked on: ' + date.format());
        // alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
        // alert('Current view: ' + view.name);
      },

    success: function(doc) {
        var events = [];
        $(doc).find('event').each(function() {
            events.push({
                title: $(this).attr('title'),
                start: $(this).attr('start') // will be parsed
            });
        });
    },

    eventAllow: function(dropLocation, draggedEvent) {
      if (draggedEvent.id === '999') {
        return dropLocation.isAfter('2017-03-22'); // a boolean
      }
      else {
        return true;
      }
    }
  };

    ngOnInit() {
      this.getTotalEmployee();
      this.getComputeAbsent();
      this.getTotalAttendance();
      // this.showEvent();
      this.calendarOptions['events'] = this.events;

    }



     public catchError(error: any) {
         let response_body = error._body;
          let response_status = error.status;

          if( response_status == 500 ){
            this.error_title = 'Error 500';
            this.error_message = 'The given data failed to pass validation.';
          } else if( response_status == 200 ) {
            this.error_title = '';
            this.error_message = '';
          }

        }

     showEvent(){
       this._event_service.getEventList()
       .subscribe(
          data => {
          this.events = Array.from(data);
          this.calendarOptions['events'] = this.events;
          console.log(this.calendarOptions['events']);

          },
          err => this.catchError(err)

      );
      }


    getEvents() {
       this._event_service.getEvents().subscribe(
        data => {
          this.eventsList = Array.from(data); 
          this.calendarOptions['events'] = this.eventsList;

        },
        err =>{}
      );
    }

this is my modal function that im trying to call in jquery function above

   addModal() {
    let disposable = this.modalService.addDialog(EventComponent, {
            title:'Add Event'
          }).subscribe((isConfirmed)=>{
      });
    }
    getTotalAttendance() {
      let pre;
       this._attend_service.getTotalPresent().subscribe(
        data => {
          pre = Array.from(data);
          this.present = pre[0].total_present;

        },
        err =>{}
      );
    }

    getTotalEmployee() {
      let totalEmp;
      let filter = "Active";
       this._attend_service.getTotalEmp(filter).subscribe(
        data => {
          totalEmp = data; // fetced record
          this.total_emp = totalEmp[0].total_employee;

        },
        err =>{}
      );
    }

    getComputeAbsent(){
        let employee = parseInt(this.employee);
        let attendance = parseInt(this.attendance);

          this.totalAbsent = employee - attendance;


      }

• javascript
• jquery
• angular
• typescript

1 Answer 1

If you don't need the enclosed this

You can use the arrow function:

dayClick: (date, jsEvent, view)=> {
             this.addModal();
             }

Or you can store the outer this in a variable and use it later

var self = this; // store here
dayClick: function(date, jsEvent, view) {
             self.addModal(); // use here
          }

Edit:

getCalendar(){
  var self = this; // ******
  calendarOptions:Object = {
    height: 'parent',
    fixedWeekCount : false,
    defaultDate: '2017-03-01',
    editable: true,
    eventLimit: true, // allow "more" link when too many 
    dayClick: function(date, jsEvent, view) {
       self.addModal(); // *********
      },

    success: function(doc) {
        var events = [];
        $(doc).find('event').each(function() {
            events.push({
                title: $(this).attr('title'),
                start: $(this).attr('start') // will be parsed
            });
        });
    },

    eventAllow: function(dropLocation, draggedEvent) {
      if (draggedEvent.id === '999') {
        return dropLocation.isAfter('2017-03-22'); // a boolean
      }
      else {
        return true;
      }
    }
  };