Angular 4 component : call javascript/jquery code from another file

Question

i have a jquery code which gets executed at ngAfterViewInit()

//myComponent.ts
ngAfterViewInit() {
    $(function () {
    $('#myElement').click(function (e) {
        //code working fine here
    });
}

but i want to move it to an external myScripts.js to simplify the component

i tried moving tthe code to an external file then use import but this makes the script to be called only once so if i navigate to a child component (which erases the html element myElement with the onclick defined ) then back to the parent myElement is back without the onclick event

so the question is :

what is the best practice to use jquery/javascript with angular4

Joey Ciechanowicz · Accepted Answer · 2017-10-19 16:07:33Z

1

You need to export your function from myScripts.ts and then import it and call it within ngAfterViewInit().

After exporting correctly you should be able to do:

// app.ts
import { myInitFunc } from './myScripts';

ngAfterViewInit() {
  myInitFunc();
}

// myScripts.ts
export function myInitFunc(): void {
  $(function () {
    $('#myElement').click(function (e) {
      //do stuff
    });
  }
};

Take a look at export: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

edited Oct 19, 2017 at 16:07

answered Aug 1, 2017 at 11:32

Joey Ciechanowicz

3,6633 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular 4 component : call javascript/jquery code from another file

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related