1

I have a single page application which is developed in MVC and jQuery. I have a button in my cshtml page and click of that button, I need to load a function which is present inside angular component. How can I achieve this?

SPR
  • 116
  • 7
  • Following Dynamic Component concept? – k11k2 Sep 26 '17 at 04:32
  • can you add your componet and html – Robert Sep 26 '17 at 04:33
  • Robert and k11k2, I had a requirement to open angular component in a dialog on click of a button in jquery application. I am able to achieve this using iframe. I will post the code shortly. – SPR Oct 14 '17 at 04:24

2 Answers2

0

One of the possible ways out is to put your component in global scope, i.e. create your component and put it on window object. Here is a thread which achieves the similar functionality

How do expose angular 2 methods publicly?

hope this helps.

Geek
  • 2,766
  • 1
  • 19
  • 16
  • Thanks Usman. I am able to call the function by following the link you gave. I had a requirement to open angular component in a dialog on click of a button in jquery application. I am able to achieve this using iframe. – SPR Oct 14 '17 at 04:24
-1

I am able to open angular2 app inside a jquery dialog by the below approach:

jQuery app:

1) Inside the function where I am opening a dialog, I am creating an iframe and then passing the angular app URL as its source.

2) I am also declaring a window level variable and assigning it with data from my parent jQuery app so that I can make use of this data in my child angular application.

window.angAppInput = "Input to angular app"

Angular app:

1)Before component declaration, I declare window object as below:

declare var window: any;

2)Inside ngOnInit, I am initializing my angular application with data from parent jQuery app using below:

this.angAppInput = window.parent.angAppInput;
SPR
  • 116
  • 7