@interopio/ng/README.md

IO Connect library for Angular - Browser and Desktop

## Overview 

The [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) library provides modules and services for the io.Connect JavaScript libraries - [`@interopio/browser`](https://www.npmjs.com/package/@interopio/browser) and [`@interopio/browser-platform`](https://www.npmjs.com/package/@interopio/browser-platform), if you are working on an **io.Connect Browser** project, or [`@interopio/desktop`](https://www.npmjs.com/package/@interopio/desktop), if you are working on an **io.Connect Desktop** project. This wrapper provides easy access to the io.Connect functionalities and facilitates using the io.Connect APIs in your Angular apps.

## Prerequisites

This package should be used only in Angular apps. If your app was created with the Angular CLI, then you don't need to take any additional steps. Otherwise, make sure to install the peer dependencies of [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) described in the `package.json` file of the library.

> ⚠️ *Note that `@interopio/ng` v4 supports Angular 14+, while `@interopio/ng` v3 supports Angular 7-15 (inclusive).*

The following example assumes that your app was created with the Angular CLI. Install the `@interopio/ng` library:

```cmd
npm install --save @interopio/ng
```

## Usage

The following examples demonstrate initializing the [`@interopio/ng`](https://www.npmjs.com/package/@interopio/ng) library for an **io.Connect Desktop** project.

> ℹ️ *For more details on using the `@interopio/ng` library in **io.Connect Desktop** and **io.Connect Browser** projects, see the [io.Connect Desktop](https://docs.interop.io/desktop/getting-started/how-to/interop-enable-your-apps/angular/index.html) and [io.Connect Browser](https://docs.interop.io/browser/developers/browser-client/angular/index.html) official documentation respectively.*

### Angular 15 and Later

In your `app.config.ts` file:

```javascript
import { importProvidersFrom } from "@angular/core";
import { provideRouter } from "@angular/router";

import { routes } from "./app.routes";
import { IOConnectNg } from "@interopio/ng";
import IODesktop from "@interopio/desktop";

export const appConfig = {
    providers: [
        provideRouter(routes),
        importProvidersFrom(
            IOConnectNg.forRoot({ desktop: { factory: IODesktop }})
        )
    ]
};
```

In your `main.ts` file:

```javascript
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, appConfig)
    .catch((err) => console.error(err));
```

### Angular 14 and Below

Import the `IOConnectNg` module in the root module of your app and pass an io.Connect factory function:

```javascript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";

import { AppComponent } from "./app.component";
import { IOConnectNg } from "@interopio/ng";
import IODesktop from "@interopio/desktop";

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        IOConnectNg.forRoot({ desktop: { factory: IODesktop } })
    ],
    providers: [],
    bootstrap: [AppComponent]
});

export class AppModule { };
```