CapitalOS for Angular

Angular components and services for integrating with CapitalOS.

Requirements

• Angular 14.0.0 or higher

Installation

pnpm

pnpm add @capitalos/angular

npm

npm install @capitalos/angular

yarn

yarn add @capitalos/angular

Documentation

Please refer to the official docs for more details.

Usage

1) Provide SDK configuration

You must provide a getToken() function which returns a one-time token from your backend (your backend should call CapitalOS "initiate login" for the relevant account/user).

Standalone apps

import { bootstrapApplication } from '@angular/platform-browser'
import { provideCapitalOs } from '@capitalos/angular'
import { AppComponent } from './app/app.component'

bootstrapApplication(AppComponent, {
  providers: [
    provideCapitalOs({
      getToken: async () => {
        const res = await fetch('/api/capitalos/initiate-login', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({ accountId: 'act_...' }),
        })
        const json = await res.json()
        return json.token
      },
      enableLogging: true,
    }),
  ],
})

NgModule apps

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { CapitalOsModule } from '@capitalos/angular'

@NgModule({
  imports: [
    BrowserModule,
    CapitalOsModule.forRoot({
      getToken: async () => {
        const res = await fetch('/api/capitalos/initiate-login', {
          method: 'POST',
          headers: { 'content-type': 'application/json' },
          body: JSON.stringify({ accountId: 'act_...' }),
        })
        const json = await res.json()
        return json.token
      },
      enableLogging: true,
    }),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2) Render the Cards app

import { Component } from '@angular/core'
import { CardsAppComponent, CapitalOSError } from '@capitalos/angular'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardsAppComponent],
  template: ` <capitalos-cards-app (loaded)="onLoaded()" (error)="onError($event)" /> `,
})
export class AppComponent {
  onLoaded(): void {
    // iframe + app content loaded
  }

  onError(error: CapitalOSError): void {
    // handle auth / connection / iframe errors
    console.error(error)
  }
}

Notes

• The SDK automatically performs token exchange (one-time token → long-lived JWT) using a hidden iframe.
• You control loading UI in your app via the component’s (loaded) and (error) events.