> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stackone.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular

> Embed StackOne Hub in an Angular app using the <stackone-hub> custom element

Use the `<stackone-hub>` custom element from `@stackone/hub` in any Angular template.

<Steps>
  <Step title="Install the package">
    <CodeGroup>
      ```bash npm theme={null}
      npm install @stackone/hub
      ```

      ```bash yarn theme={null}
      yarn add @stackone/hub
      ```

      ```bash pnpm theme={null}
      pnpm add @stackone/hub
      ```
    </CodeGroup>
  </Step>

  <Step title="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:

    ```ts theme={null}
    // 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 {}
    ```
  </Step>

  <Step title="Register the element at app entry">
    The import is side-effecting — it registers `<stackone-hub>` on `customElements`.

    ```ts theme={null}
    // 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));
    ```
  </Step>

  <Step title="Get a session token from your backend">
    <Snippet file="guides/web-component-token-step.mdx" />
  </Step>

  <Step title="Add the element and listen for events">
    Bind attributes with `[attr.name]` and subscribe to events with `addEventListener` via `@ViewChild`:

    ```ts theme={null}
    // 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);
      }
    }
    ```
  </Step>
</Steps>

## Attribute reference

All scalar `StackOneHub` props map to kebab-case HTML attributes — see the [vanilla guide](/guides/web-component-vanilla#attribute-reference) for the full table. Bind them with `[attr.name]="value"` to keep them as attributes rather than Angular property bindings.

## Events

Native DOM `CustomEvent`s on the element:

| Event     | `event.detail`                     |
| --------- | ---------------------------------- |
| `success` | `{ id: string; provider: string }` |
| `close`   | `undefined`                        |

Angular's `(event)` template binding **does** fire on native DOM `CustomEvent`s, so `(success)="onSuccess($event)"` works. We use `addEventListener` via `@ViewChild` here for explicit teardown in `ngOnDestroy`.

## Next steps

<CardGroup cols={2}>
  <Card title="Backend setup" icon="server" href="/platform/connect-your-backend-with-stackone">
    Generate session tokens from your backend.
  </Card>

  <Card title="Filter connectors" icon="filter" href="/guides/embedding-stackone-hub#hub-behavior-customization">
    Restrict the Hub to a single provider or category.
  </Card>
</CardGroup>