Call Angular 9 function from jQuery

Question

Is it somehow possible to call a function coded in a Angular 9 component from jQuery?

I have an Angular 9 application where I have made it possible to include some small plug-ins written in jQuery. Now I want to make some simple function available from the Angular 9 app to the jQuery plugins.

E.g. showing a confirm modal (to make it easy to use the confirm modal used in the main app).

Then I need to call the Angular function with parameters (text to show in the modal) and also get a response when the user has confirmed.

Example of some of the Angular component that loads the jQuery plug-in into the markup, off a method for the jQuery plug-in:

    @Component({
    selector: 'ov-plugin-loader',
    templateUrl: './plugin-loader.component.html',
    styleUrls: ['./plugin-loader.component.scss'],
})
export class PluginLoaderComponent implements OnDestroy {

    public readonly head = document.getElementsByTagName('head')[0];
    public htmlString: SafeHtml;

    constructor(....) { }

    public callMeFromJquery (title: string, message: string): Observable<any> { 
        
        return ...
    }
}

Then I would like to call that function from my jQuery code:

class MyJQueryPlugin {
  doSomething() {
    [call callMeFromJquery('header','content')]
   }
}

Thanks for your reply, I have added some code for showing the issue — PNR, Jun 24 '20 at 07:48
No ,I don't think so, though the angular team is working on something called angular elements , perhaps this is what you're looking for https://angular.io/guide/elements — Dev Man, Jun 24 '20 at 08:02
Does this answer your question? [Angular2 - how to call component function from outside the app](https://stackoverflow.com/questions/35296704/angular2-how-to-call-component-function-from-outside-the-app) — Philipp Meissner, Jun 24 '20 at 10:54

score 1 · Answer 1 · answered Jun 24 '20 at 08:23

So first of all you should not use jQuery in the Angular application. We had faced lot of issues once we started using jQuery in the Angular app.

As it was very old application somehow we managed calling the angular functions from jQuery code using custom events concept in JavaScript.

Basically you need to define custom event in your jQuery code like this.

var myDialogEvent = new CustomEvent("showDialog", {
    cancelable: true,
    detail: {
          desc: "Display alert message with custom text",
          time: new Date(),
    }
});

var myDialogEvent = new CustomEvent("showDialog", {});

Above code will define custom event named as showDialog

You can dispatch this event where ever you want such as on button click handler or ajax response. Make sure to pass the data to this event so that you can access it in your angular code. In this case I am passing detail object.

window.dispatchEvent(myDialogEvent);

Now you can listen this custom event in your angular code.

// listen to the custom event in angular code (inside ngOnInit() method)
window.addEventListener('showDialog', function(event) {
    if (event.detail) {
        alert(event.detail.desc);
    }
});

Paflow · Answer 2 · 2020-06-24T14:59:12.337

I think mixing jQuery an Angular is a terrible concept, but you can do a lot of stuff to archive this. The most primitive solution would be: expose your angular functions globally:

    <script>
     jQuery('#jquery-action').on('click', () => {
       jQuery('#jquery-action').html('JQuery called angular, and it said : ' 
       + callAngular('jquery'));
     });
    </script>

and inside an Angular component:

  constructor() {
    window['callAngular'] = this.callAngular;
  }

  callAngular(data) {

    return `Hello '${data}', I am Angular.`;
  }

Instead of sharing the function directly, maybe I would come up with some global object to be exposed in window containing all functions, which has to be accessed from outside...

Example on Stackblitz

Call Angular 9 function from jQuery

2 Answers2