Call a javascript function registered using c# from typescript

Question

I have added a function call from C# using RegisterStartupScript as follows:

Page.ClientScript.RegisterStartupScript(this.GetType(), "PrintWindowJScript", "<script type=\"text/javascript\">OpenNewWindow() { Reports_OpenWindowNamed(URL, 350, 250, \"PrintAttachPopupWindow\"); }</script>");

The above code will add it into the DOM, so when i call OpenNewWindow(), it should call the function from my angular component.

Now in my angular component i have a dropdown change function in Typescript (Angular). I need to call the OpenNewWindow() from here as mentioned below.

interface IMyWindow {
  OpenNewWindow: Function;
}
declare var v_MyWindow: IMyWindow ;

export class MyComponent implements OnInit {

  ngOnInit() {
  }

  attachChange(attachDropDown: any) {
    if(attachDropDown.value && attachDropDown.value.id == "MyValue"){
      v_MyWindow.OpenNewWindow();
    }
  }
}

The above code gives me "v_MyWindow" as undefined.

I have tried refering to this article, but not working.

Can anyone let me know if i am missing anything? What should i do to call the function?

What is your current code and the error you are encountering? — jegtugado, May 06 '20 at 11:18
@jegtugado i have updated it to include a detailed explaination — Sridhar Sondur, May 06 '20 at 11:43

score 1 · Accepted Answer · answered May 06 '20 at 13:13

You've already created the interface and declared the variable v_MyWindow, you only need to assign the property OpenNewWindow.

change:

Page.ClientScript.RegisterStartupScript(this.GetType(), "PrintWindowJScript", "<script type=\"text/javascript\">OpenNewWindow() { Reports_OpenWindowNamed(URL, 350, 250, \"PrintAttachPopupWindow\"); }</script>");

to:

Page.ClientScript.RegisterStartupScript(this.GetType(), "PrintWindowJScript", "<script type=\"text/javascript\">v_MyWindow.OpenNewWindow = function() { Reports_OpenWindowNamed(URL, 350, 250, \"PrintAttachPopupWindow\"); }</script>");

score 0 · Answer 2 · answered May 06 '20 at 12:44

where do you assign a value to v_MyWindow? Maybe you first want to get a reference to the native window object in Angular.

An approach to that is explained here: https://juristr.com/blog/2016/09/ng2-get-window-ref/

Basically you define an injectable wrapper around the window import:

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

function _window(): any {
   // return the global native browser window object
   return window;
}

@Injectable()
export class WindowRef {
   get nativeWindow(): any {
      return _window();
   }
}

Then you import it into your application like this:

import { WindowRef } from './WindowRef';

@NgModule({
    ...
    providers: [ WindowRef ]
})
export class AppModule{}

Consume you depency in your component like that:

export class MyComponent implements OnInit {
    constructor(
        private nativeWindow: WindowRef) { }

    ngOnInit(): void {
        console.debug('Native window inner width: ', this.nativeWindow.nativeWindow.innerHeight);
    }
}

This should give you a console output like this:

Call a javascript function registered using c# from typescript

2 Answers2