@hardpool/js-bridge
v1.2.0
Published
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.
Downloads
28
Readme
@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 |