Jherzon Franz Nava Rojas Jherzon Franz Nava Rojas - 1 year ago 106
Javascript Question

Call typescript from javascript and viceversa

Here is the issue...
I first had some libraries that have their d.ts files so i was able to use them in an angular2 project, but i dont have the d.ts for some others, and also the libraries from the opensource repository are not complete or are not updated for the newer version of the .js libraries that i wish to use.

So I want to try the same operation but in opposite direction, like i have some restrictions due to angular2 ... I am able to include directly javascript to an html page, and the angular2 environment will be triggered as always.

Let me post some code so you undestand better:

<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js" charset="utf-8"></script>
<script src="systemjs.config.js"></script>
System.import('app').catch(function(err){ console.error(err); });
<!-- Here my custom javascript that will create some controls under body-->
<!-- this script will create some custom controls-->

So as you see the angular will be configured and loaded as alwasys but my custom javascript will be also executed.

I want to communicate from that javascript that is at the bottom in the page with
the angular2 components/modules

Any ideas?????????

Sothing weird i imagine is to create a hidden div where i store my json and the use it to comunicate with the components/modules... it is to dirty but you may have some better ideas!!!!!!

Answer Source

Sorry i didnt't update the code so here is the solution: You will registers callbacks at global scope to comunicate to angular2, the update from typescript component to javascript is easy we just call this callback that is register at global scope, but calling the callback from javascript to update the angular2 component is a little bit tricky but i leave you here the conde of a component:

export class MyComponent {
    selectedData: any;

    constructor(private _ngZone: NgZone,
        private elementRef: ElementRef) {
        this.title = this.companyName;

    public updateDataAction = (data: any) => {
        this._ngZone.runOutsideAngular(() => {
           this._ngZone.run(() => {
               this.selectedData = data[0].value[3];

    ngAfterViewInit() {

Take in count that SendMessage is a global method, i mean registered in global scope and of course you need to add the definition in d.ts file like this:

declare function sendMessage(callback: ((message: string) => void)): void;

BEAUTIFUL ISN'T IT??? a piece of art

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download