@hardpool/js-bridge

Bridge between pure vanilla javascript and angular. Expose selected methods of angular component on javascript window object and call them from external javascript application. Making angular app plugable/co-exist with other front end app.

Demo

Click here to see it in action!

Installation

npm i @hardpool/js-bridge

Usage

Import JsBridgeModule in your module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { JsBridgeModule } from '@hardpool/js-bridge';

@NgModule({
  // ...
  imports: [
	// ...
	JsBridgeModule.forRoot()
  ],
  // ...
})
export class AppModule { }

Import service in component and expose component methods as required using js bridge methods.

component.ts

import { JsBridgeService } from '@hardpool/js-bridge';

@Component({
  // ...
})
export class DemoComponent implements OnInit {
	constructor(..., jsBridge: JsBridgeService, ...) {
		jsBridge.exposeMethod(this, "someNamespace", "someMethod");
	}

	someMethod(...params) {
		...
	}
}

In javascript call method like,

someNamespace.someMethod(...args);

API

Below are the methods exposed by JsBridge.

Method	Details
exposeMethod(classRef: any, namespace: string, fnName: string[] | string)	Expose angular component method on javascript window object. classRef: Reference of current class, generally this namespace: Name of namespace on which method is exposed, could be any string, if null method will be exposed on window fnName: Name of function to be exposed, nust match component method name
executeMethod(namespace: string, methodName: string, ...args: any[])	Executes javascript method outsize angular