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

# Angular

> Initialize Connect.js in an Angular component lifecycle and open it from the template.

Initialize Connect.js in `ngOnInit`, keep the instance on the component, and close it during teardown.

## Account-linking component

```typescript theme={null}
import { Component, Input, OnDestroy, OnInit } from "@angular/core"
import Connect from "@mono.co/connect.js"

@Component({
  selector: "app-link-mono-account",
  templateUrl: "./link-mono-account.component.html"
})
export class LinkMonoAccountComponent implements OnInit, OnDestroy {
  @Input({ required: true }) customerId!: string

  private connect: any
  ready = false

  ngOnInit() {
    this.connect = new Connect({
      key: "PUBLIC_KEY",
      scope: "auth",
      data: {
        customer: { id: this.customerId }
      },
      onLoad: () => {
        this.ready = true
      },
      onSuccess: ({ code }) => this.exchangeCode(code),
      onClose: () => console.log("Connect closed")
    })

    this.connect.setup()
  }

  open() {
    this.connect?.open()
  }

  ngOnDestroy() {
    this.connect?.close()
  }

  private async exchangeCode(code: string) {
    const response = await fetch("/api/mono/exchange", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ code })
    })

    if (!response.ok) {
      throw new Error("Could not complete Mono account linking")
    }
  }
}
```

The template opens the mounted widget only after `onLoad` marks it ready.

```html theme={null}
<button type="button" [disabled]="!ready" (click)="open()">
  {{ ready ? "Link a financial account" : "Loading account linking…" }}
</button>
```

Load `PUBLIC_KEY` from Angular's browser-safe environment configuration. Do not add the Mono secret key to that configuration.

## Reauthorization

For an existing linked account, replace `setup()` with `reauthorise(accountId)`.

```typescript theme={null}
this.connect = new Connect({
  key: "PUBLIC_KEY",
  scope: "auth",
  onSuccess: ({ code }) => this.handleReauthorization(code)
})

this.connect.reauthorise(this.accountId)
```

The argument is the Mono account ID string. It is not an auth code or reauth token.

## Angular-specific checks

* Initialize after Angular creates the component in the browser.
* Keep one SDK instance for the component lifetime.
* Tear down the mounted widget in `ngOnDestroy`.
* Route `onSuccess` data to a backend endpoint.
* Keep `MONO_SECRET_KEY` in the server environment only.

See [Basic account linking](/content/sdk/connect-js/usage/basic-integration) for the full lifecycle and [Troubleshooting](/content/sdk/connect-js/usage/troubleshooting) for common failures.