Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

Is there a correct way to invoke a JavaScript function from a component in Angular 2 (TypeScript) ?

Here is my component :

import { ElementRef, AfterViewInit }       from '@angular/core';

export class AppComponent implements AfterViewInit {

    constructor(private _elementRef: ElementRef) {
    }

    ngAfterViewInit() {
        /**
         * Works but i have this error :
         * src/app.component.ts(68,9): error TS2304: Cannot find name 'MYTHEME'.
         * src/app.component.ts(69,9): error TS2304: Cannot find name 'MYTHEME'.
         */
        MYTHEME.documentOnLoad.init(); 
        MYTHEME.documentOnReady.init();

        /**
         * Works without error, but doesn't seem like a right way to do it
         */
        var s = document.createElement("script");
        s.text = "MYTHEME.documentOnLoad.init(); MYTHEME.documentOnReady.init();";
        this._elementRef.nativeElement.appendChild(s);
    }
}

Calling the JavaScript function directly result in an compilation error, but the syntax in the "compiled" JavaScript file (app.component.js) is correct :

AppComponent.prototype.ngAfterViewInit = function () {
    MYTHEME.documentOnLoad.init();
    MYTHEME.documentOnReady.init();
};

The 2nd way (appendChild) works without error, but i don't think (altering the DOM from typescript/angular) is the correct way to do it.

I found this : Using a Javascript Function from Typescript I tried declaring the interface :

interface MYTHEME {
    documentOnLoad: Function;
    documentOnReady: Function;
}

But the TypeScript doesn't seem to recognize it (no error in the interface declaration).

Thanks

Edit :

Following the answer by Juan Mendes this is what i ended with :

import { AfterViewInit }       from '@angular/core';

interface MYTHEME {
    documentOnLoad: INIT;
    documentOnReady: INIT;
}
interface INIT {
    init: Function;
}
declare var MYTHEME: MYTHEME;

export class AppComponent implements AfterViewInit {

    constructor() {
    }

    ngAfterViewInit() {
        MYTHEME.documentOnLoad.init(); 
        MYTHEME.documentOnReady.init();
    }
}
share|improve this question
up vote 3 down vote accepted

You have to tell TypeScript about external (JavaScript) declarations using declare. See https://www.typescriptlang.org/docs/handbook/writing-declaration-files.html

interface MyTheme {
    documentOnLoad: Function;
    documentOnReady: Function;
}
declare var MYTHEME: MyTheme;

Or anonymously

declare var MYTHEME: {documentOnLoad: Function, documentOnReady: Function};
share|improve this answer
    
Thanks, it works! – Joshua May 20 at 13:53

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.