Skip to main content
Use the <stackone-hub> custom element from @stackone/hub in any Angular template.
1

Install the package

npm install @stackone/hub
2

Allow custom elements in your component

Add CUSTOM_ELEMENTS_SCHEMA to the component (or module) that uses <stackone-hub> so Angular accepts unknown tags as custom elements:
// src/app/app.component.ts
import { CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './app.component.html',
})
export class AppComponent {}
3

Register the element at app entry

The import is side-effecting — it registers <stackone-hub> on customElements.
// src/main.ts
import '@stackone/hub/webcomponent';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent).catch((err) => console.error(err));
4

Get a session token from your backend

5

Add the element and listen for events

Bind attributes with [attr.name] and subscribe to events with addEventListener via @ViewChild:
// src/app/app.component.ts
import {
  AfterViewInit,
  Component,
  CUSTOM_ELEMENTS_SCHEMA,
  ElementRef,
  OnDestroy,
  ViewChild,
} from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <stackone-hub
      #hub
      [attr.token]="token || null"
      mode="integration-picker"
      height="600px"
    ></stackone-hub>
  `,
})
export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('hub') hubRef?: ElementRef<HTMLElement>;
  token = '';

  private onSuccess = (event: Event) => {
    const detail = (event as CustomEvent).detail;
    console.log('Connected:', detail.id, detail.provider);
  };
  private onClose = () => console.log('Closed');

  async ngAfterViewInit() {
    this.token = await retrieveConnectSessionToken();
    this.hubRef?.nativeElement.addEventListener('success', this.onSuccess);
    this.hubRef?.nativeElement.addEventListener('close', this.onClose);
  }

  ngOnDestroy() {
    this.hubRef?.nativeElement.removeEventListener('success', this.onSuccess);
    this.hubRef?.nativeElement.removeEventListener('close', this.onClose);
  }
}

​
Attribute reference

All scalar StackOneHub props map to kebab-case HTML attributes — see the vanilla guide for the full table. Bind them with [attr.name]="value" to keep them as attributes rather than Angular property bindings.

​
Events

Native DOM CustomEvents on the element:
Eventevent.detail
success{ id: string; provider: string }
closeundefined
Angular’s (event) template binding does fire on native DOM CustomEvents, so (success)="onSuccess($event)" works. We use addEventListener via @ViewChild here for explicit teardown in ngOnDestroy.

​
Next steps

Backend setup

Generate session tokens from your backend.

Filter connectors

Restrict the Hub to a single provider or category.