Package Exports

@hardpool/js-bridge

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@hardpool/js-bridge) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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