https://github.com/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.
https://github.com/hardpool/js-bridge

angular javascript library npm

Last synced: about 1 month ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/hardpool/js-bridge
• Owner: hardpool
• Created: 2020-05-17T06:26:33.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-06-12T21:02:30.000Z (about 6 years ago)
• Last Synced: 2025-10-05T01:54:42.549Z (9 months ago)
• Topics: angular, javascript, library, npm
• Language: TypeScript
• Size: 509 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# @hardpool/js-bridge

![Example GIF](https://img.shields.io/badge/support-angular%209.x-brightgreen.svg)  ![Example GIF](https://img.shields.io/badge/support-angular%205.x+-brightgreen.svg)

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!](https://jsbridge.hardikdabhi.com/)

## Installation

`npm i @hardpool/js-bridge`

## Usage

Import `JsBridgeModule` in your module.

``` typescript

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](#API).

component.ts

``` typescript

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,

``` javascript

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 |