Call Angular Function From JavaScript

Arvind Kushwaha

7y92.7k625Blog

6 Comments

Join the conversation! Your thoughts help the community grow.

Giuliano Gonzales5y ago
Var dynJs = "window['angularComponentReference'] = { component: this, zone: this.ngZone, loadAngularFunction: () => this.angularFunctionCalled(), };"; eval(dynJs);
Chayanut Pasing5y ago
I figure it out you need to change from window['angularComponentReference'] to (window as any)['angularComponentReference']
joaquin stevenazzi5y ago
I am having the same error than Gabriel if anyone knows how to pass over that error. Please pass the answer.
Gabriel Cherem5y ago
This is exactly what I was looking for. Unfortunately I am getting the following error with Angular 11: Error: src/app/app.component.ts:16:12 - error TS7015: Element implicitly has an 'any' type because index expression is not of type 'number'. 16 window['angularComponentReference'] = { component: this, zone: this.ngZone, loadAngularFunction: () => this.angularFunctionCalled(), };
Naga Chavakula6y ago
Excellent post!! well explained, thanks for saving some days
Tanvir Kaur6y ago
Hi, with your above code the angular function is called successfully but the view is not being updated after that. Can you help me with that?

This small trick will help you to call any Angular 2+ function from a JavaScript function.

Prerequisite

Having prior knowledge of Angular 2+ and JavaScript will be helpful.

Please visit the official website to create an Angular 2+ project using Angular CLI. https://angular.io/start

Add this function into theHTML page head tag.

function callAngularFunction() {
window.angularComponentReference.zone.run(() => { window.angularComponentReference.loadAngularFunction(); });
}

Add Angular 2+ files into the demonstrateOutsideCall.html head tag.

<html>
<head>
<app-root></app-root>
<base href="/">
<script src="D:/demonstrateOutside/runtime.js"></script>
<script src="D:/demonstrateOutside/polyfills.js"></script>
<script src="D:/demonstrateOutside/styles.js"></script>
<script src="d:/demonstrateOutside/vendor.js"></script>
<script src="d:/demonstrateOutside/main.js"></script>
<script type="text/javascript">
function callAngularFunction() {
window.angularComponentReference.zone.run(() => { window.angularComponentReference.loadAngularFunction(); });
}
</script>
</head>
<body>
<button type="button" onclick="callAngularFunction();">Call Angular 2 Function </button>
</body>
</html>

Create an Angular 2+ project using Angular CLI command and write the below code into AppComponent class.

import { Component, NgZone } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(
private ngZone: NgZone,
) { }
// tslint:disable-next-line:use-life-cycle-interface
ngOnInit() {
window['angularComponentReference'] = { component: this, zone: this.ngZone, loadAngularFunction: () => this.angularFunctionCalled(), };
}
angularFunctionCalled() {
alert('Angular 2+ function is called');
}
}

Note that the window object window['angularComponentReference'] in AppCommonent Class and window.angularComponentReference in JavaScript should match.

Now, build the project by running the command ng build and save all files into the demonstrateOutside folder and reference these file into demonstrateOutsideCall.html page.

Now, simply open the HTML page into any browser and click on the button "Call Angular 2 Function" which results in an alert message "Angular 2+ function is called".