Angular External Methods

We’ll demystify having external methods call into our angular application by using my angular module NgxuxWindowReceiver.

The NgxuxWindowReceiver Module allows you to easily expose external methods to the window object and observe method calls using subscriptions.

Getting Started

$ npm install @ngxux/window-receiver

Implementation

import { Component }                  from '@angular/core';
import { NgxuxWindowReceiverService } from '@ngxux/window-receiver';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.scss' ]
})
export class AppComponent {

    /**
     * Inject the window reicever service.
     *
     * @param {NgxuxWindowReceiverService} windowReceiverService
     */
    public constructor(private windowReceiverService: NgxuxWindowReceiverService) {

        //
        // Add the external function by name and subscribe to the observable
        // that is returned.
        //
        this.windowReceiverService.add({

            methodName: 'myExternalFunction'

        }).subscribe(args => {

            console.log('myExternalFunction called with arguments:', args);

        });

    }

}

Documentation

https://ngxux.com/packages/ngxux-window-receiver