Angular

// 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 {}

// 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));

// 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);
  }
}