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

4 months ago

Latest Post Ansible to Slack by Matthew Davis

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

Matthew Davis

Published 4 months ago

Comments?

Leave us your opinion.