How to use/bind angular variable in javascript function

Question

I got an Angular component which use a javascript library (FullCalendar V4). The library call a function when some events appends (Mouse over, click etc...) and has an argument which make me able to have access to values of the calendar (start date, end date, Id etc...). My goal is to get datas from my javascript function inside an Angular Variable. I precise that if i use a console.log inside my javascript function, values are perfectly displayed, but i don't manage to get that values inside my component's variable.

I think this is a problem of scope. My Angular component cannot access to the content of my javascript function, and my javascript function cannot access to my Angular variables.

Here is a simplified example of my code to explain :

//general import
import { Component} from '@angular/core';

//service
import { IcsService } from '../../_Services/ics.service';

//variables
declare const FullCalendar: any;
@Component({
    selector: 'app-scheduler',
    templateUrl: './scheduler.component.html'
})
/** scheduler component*/
export class SchedulerComponent {
  ressources: any;
  event: any;
  plop: any ; //that's the var i will use for getting my javascript variable content


  /** scheduler ctor */
  constructor(private ics_service: IcsService) {}

//Add Event and ressources, that works, no worry about it
  ngOnInit() {
    this.that = this;
    this.ics_service.GetAllRessources().subscribe(result => {
      this.ressources = result;
      console.log(this.ressources);
      this.ics_service.GetAllEvents().subscribe(result => {
        this.event = result;
        console.log(this.event);
        this.calendar();       
      });
    });   
  }

  calendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {

//Parameters variables are hidden here to simplify the understanding of the code

      resources: this.ressources,
      events: this.event,
      eventClick: function (info) {

       //Here is the line that i want to achieve 
      this.plop = info.event.start.toDateString();

      console.log(info.event.start.toDateString()); //that line perfectly work

      }
    });
    calendar.render();
  }
}

Thanks for your help.

Answer 1

the scope for the this is under your FullCalendar class, you can either store the this reference for your angular component to another variable or use arrow function (as in Danil answer)

...
// store your angular component `this` to another variable
var that = this;
var calendar = new FullCalendar.Calendar(calendarEl, {
//Parameters variables are hidden here to simplify the understanding of the code

  resources: this.ressources,
  events: this.event,
  eventClick: function (info) {

   // use the stored reference
  that.plop = info.event.start.toDateString();

  console.log(info.event.start.toDateString()); //that line perfectly work

  }
});

Answer 2

You need to use arrow function there to get access to your this context:

eventClick: (info) => {
      this.plop = info.event.start.toDateString();

      console.log(info.event.start.toDateString()); //that line perfectly work
}

So you can use this.plop as expected

Update

Also as you use third party lib then the view might not update on click. So if view update didn't work try using private cd: ChangeDetectorRef from dependency injection in constructor and then call this.cd.markForCheck() in your eventClick callback