Angular Integration

Fusio provides an Angular SDK to easily integrate Fusio into your existing Angular application.

Setup

The SDK library provides a flexible way to build Angular apps using Fusio as backend. It is used by many Fusio related apps i.e. the backend and developer app.

To use this library in your project you need to create a custom ApiService which extends from the ApiService in this SDK s.

import { Injectable } from '@angular/core';
import {CredentialsInterface} from "sdkgen-client";
import {ApiService as Sdk} from "ngx-fusio-sdk";
import {Client} from "fusio-sdk/dist/Client";

@Injectable({
    providedIn: 'root'
})
export class ApiService extends Sdk<Client> {

    protected newClient(baseUrl: string, credentials: CredentialsInterface | null | undefined): Client {
        return new Client(baseUrl, credentials);
    }

}

There we define which generated Client we use. In this example we use the generated Client for our backend API but you can also use the Client for your own API. You can then use this ApiService in every component. Then you also need to import the FusioSdkModule and overwrite the ApiService with your custom implementation so that the internal SDK also uses your ApiService.

import {ApiService} from "./api.service";
import {FusioSdkModule, ApiService as SDK} from "ngx-fusio-sdk";

@NgModule({
  //...
  imports: [
    //...
    FusioSdkModule.forRoot({
      baseUrl: 'https://myapi.fusio.cloud',
    })
  ],
  providers: [
    {
      provide: SDK,
      useExisting: ApiService
    }
  ],
  //...
})

Setup​

Setup