jquery - on calling javascript file from angular 2 project -

i had written calendar control in jquery wanted use in angular 2 project.

i've learned other answers on topic can use jquery's getscript api call external javascript files.

my calendar.component.ts looks this:

import { component, oninit, afterviewinit }     '@angular/core'; import { auth }                                 '../auth.service';  declare var $:any; declare var customcal:any;  @component({     selector:       'app-calendar',     templateurl:    './calendar.component.html',     styleurls:      ['./calendar.component.css'] }) export class calendarcomponent implements oninit {      private year : number;     mycal : any;      constructor(private auth : auth) {     }      ngoninit() {     }      ngafterviewinit() {         this.year   = 2017;          $.getscript('./app/calendar/zapcalendar.js', function(){             console.log("got call'd back");             this.mycal = new customcal(2017);         });     } } 

i console message "got call'd back", error message stating customcal not defined.

my customcal class defined in zapcalendar.js follows:

class customcal {     constructor(nyear) {          this._mousedown     = false;         this._mousedrag     = false;          this._lastitem      = 0;         this._nyear         = nyear;          this.createcalendarframe();         this.addeventhandlers(this);     }      ... } 

i've tried export'ing class in zapcalendar.js file, , tried adding following zapcalendar.js file:

$( function() {     var mycal = new customcal(2017); }); 

what missing here? thanks

update: i've replaced (in zapcalendar.js)

$( function() {     var mycal = new customcal(2017); }); 

with this:

var x = new customcal(2017); 

and calendar rendering correctly. i'd (if possible) reference calendar in typescript. possible?

    $.getscript('./app/calendar/zapcalendar.js', function(){         console.log("got call'd back");         this.mycal = new customcal(2017);     }); 

the inner function here not have same this reference because won't called bound object. since you're using typescript, can use arrow function change behavior.

    $.getscript('./app/calendar/zapcalendar.js', () => {         console.log("got call'd back");         this.mycal = new customcal(2017);     });