How to...

Glue42 Enable Your App

Angular

Referencing

To use any Glue42 Desktop functionality, you need to reference either the Glue42 Angular library as an npm package, or directly the Glue42 JavaScript library as a standalone file or as an npm package.

For more info on referencing the Glue42 JavaScript library, see the JavaScript section on referencing and initializing Glue42 in your apps.

As an NPM Package

The Glue42 Angular library is available as an npm package called @glue42/ng-glue. To install it, navigate to the root directory of your project and run:

npm install @glue42/desktop @glue42/ng-glue

As a Standalone File

You can also reference directly the Glue42 JavaScript library as a standalone file. If you are using a Glue42 installer, you can find the .js files in the %LOCALAPPDATA%\Tick42\GlueSDK\GlueJS\js\web folder and copy them in your project folder.

import Glue, { Glue42 } from "../../../lib/tick42-glue"; 

Initialization

Once installed, you need to import the Glue42 Angular module and invoke the static method withConfig() passing an optional configuration object to it. This method initializes an instance of Glue42. Your Glue42 will be initialized based both on the properties of the configuration object and on the default values of the respective configuration properties. Depending on whether a Glue42 API will be initialized or not, NgGlue42Module will include/exclude the appropriate service as a provider.

Example initialization, where AppManagerService will be available as a provider and LayoutsService will not:

import { NgGlue42Module } from "@glue42/ng-glue";
 
@NgModule({
    imports: [
        NgGlue42Module.withConfig({ appManager: "full", layouts: false })
    ]
})
export class AppModule { }

This is an example of how you can create a service which when invoked will initialize Glue42:

import Glue, { Glue42 } from '../../../lib/tick42-glue';

@Injectable()
export class GlueService {

    private _glue: Glue42.Glue;

    public async initialize(): Promise<void> {
        this._glue = await Glue();
        (window as any).glue = this._glue;
    }

}

Using the Library

You can start using the Glue42 Angular library by injecting any of the provided APIs into your components and services.

Example

  • In one app, listen for a certain method to be registered and immediately invoke it when it becomes available:
import { Component, OnInit } from "@angular/core";
import { InteropService } from "@glue42/ng-glue";
import { mergeMap } from "rxjs/operators";
 
@Component({
    selector: "app-root",
    templateUrl: "app.component.html"
});

export class AppComponent implements OnInit {
 
    constructor(public interopService: InteropService) { };
 
    ngOnInit(): void {
        this.interopService.methodRegistered({ methodName: "Sum" })
            .pipe(
                mergeMap(
                    () => this.interopService.invoke("Sum", { a: 37, b: 5 });
                )
            ).subscribe(result => {
                console.log(`The result of 37 + 5 is ${result.returned.answer}`);
            });
    
    }
}
  • And register the method in another app:
this.interopService.register("Sum", ({ a, b }) => ({ answer: a + b }))
    .subscribe(
        method => console.log(`Method "${method.name}" is registered.`),
        error => console.log(`Couldn't register method "Sum"`, error)
    );

Application Configuration

To show your app in the Glue42 Desktop App Manager dropdown menu, you need to create an application configuration .json file. You should place this file in the %LocalAppData%\Tick42\UserData\<REG-ENV>\apps folder. <REG-ENV> in the link should be replaced with the region and environment folder name used for the deployment of your Glue42 Desktop - e.g., T42-DEMO.

Below is an example configuration:

[
    {
        "details": {
            "mode": "tab",
            "name": "angular_example",
            "url": "http://localhost:4200"
        },
        "ignoreSaveOnClose": true,
        "name": "Angular_Example",
        "title": "Angular Example",
        "caption": "Angular Example",
        "type": "window"
    }
]

See also our Angular example in GitHub, demonstrating Glue42 initiation and integration in a standard Angular app.