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

# Angular SDK

The [Fingerprint Angular SDK](https://github.com/fingerprintjs/angular) integrates Fingerprint into Angular applications. It supports all capabilities of the JavaScript agent including a built-in [caching mechanism](/reference/js-agent-start-function#cache). See the [Angular quickstart](/docs/angular-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprint/angular` as a dependency to your application via npm, yarn or pnpm.

<CodeGroup>
  ```shell NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/angular
  ```

  ```shell Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/angular
  ```

  ```shell PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/angular
  ```
</CodeGroup>

Add `provideFingerprint` to your application's providers. You need to specify your public API key and other configuration options based on your chosen region and active integration.

```typescript TypeScript theme={"theme":"github-dark-dimmed"}
// src/app/app.config.ts
// ...other imports
import { provideFingerprint } from '@fingerprint/angular'

export const appConfig: ApplicationConfig = {
  providers: [
    // ...other config options
    provideFingerprint({
      startOptions: {
        apiKey: 'PUBLIC_API_KEY',
        endpoints: 'https://metrics.yourwebsite.com',
        // region: "eu"
      },
    }),
  ],
}
```

Inject the `FingerprintService` in your component's constructor. Now you can identify visitors using the `getVisitorData()` method from the service.

```typescript TypeScript theme={"theme":"github-dark-dimmed"}
// src/app/home/home.component.ts
import { Component } from '@angular/core'
import { FingerprintService, Fingerprint } from '@fingerprint/angular'

@Component({
  selector: 'app-home',
  template: `
    <div>
      <button (click)="onIdentifyButtonClick()">Identify</button>
      <p>VisitorId: {{ visitorId }}</p>
    </div>
  `,
})
export class HomeComponent {
  constructor(
    private fingerprintService: FingerprintService
  ) {}

  visitorId?: string = 'Press "Identify" button to get visitorId'
  result: null | Fingerprint.GetResult = null

  async onIdentifyButtonClick(): Promise<void> {
    const data = await this.fingerprintService.getVisitorData()
    this.visitorId = data.visitor_id
    this.result = data
  }
}
```

### Documentation

You can find the full documentation in the official [GitHub repository](https://github.com/fingerprintjs/angular). The repository also contains [an example app](https://github.com/fingerprintjs/angular/tree/main/src) demonstrating the usage of the library.

### Migration guide for Angular SDK v3.0.0

Version 3.0.0 of the Angular SDK switches from JavaScript agent v3 to [JavaScript agent v4](/reference/migrating-from-v3-to-v4).

1. Install a new version of the package:

<CodeGroup>
  ```bash NPM theme={"theme":"github-dark-dimmed"}
  npm install @fingerprint/angular
  ```

  ```bash Yarn theme={"theme":"github-dark-dimmed"}
  yarn add @fingerprint/angular
  ```

  ```bash PNPM theme={"theme":"github-dark-dimmed"}
  pnpm add @fingerprint/angular
  ```
</CodeGroup>

2. Update your module import and configuration:

The default caching strategy has changed from `sessionStorage` caching to **no caching by default**, aligned with the underlying [JavaScript agent v4 default](/reference/js-agent-start-function#cache). To preserve the previous behavior, explicitly configure caching in the module options (see example below).

```typescript Change module imports and configuration theme={"theme":"github-dark-dimmed"}
// [!code --:4]
import {
  FingerprintjsProAngularModule,
  FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-angular'
import { provideFingerprint } from '@fingerprint/angular' // [!code ++]

// [!code --:13]
FingerprintjsProAngularModule.forRoot({
  loadOptions: {
    apiKey: 'PUBLIC_API_KEY',
    endpoint: [
      'https://metrics.yourwebsite.com',
      FingerprintJSPro.defaultEndpoint
    ],
    scriptUrlPattern: [
      'https://metrics.yourwebsite.com/web/v<version>/<apiKey>/loader_v<loaderVersion>.js',
      FingerprintJSPro.defaultScriptUrlPattern
    ],
  },
})
// [!code ++:10]
provideFingerprint({
  startOptions: {
    apiKey: 'PUBLIC_API_KEY',
    endpoints: 'https://metrics.yourwebsite.com',
    cache: {
      storage: 'sessionStorage',
      duration: 3600,
    },
  },
})
```

3. Update service usage and result field names:

```typescript Update service usage theme={"theme":"github-dark-dimmed"}
// [!code --:5]
import {
  FingerprintjsProAngularService,
  ExtendedGetResult,
  GetResult,
} from '@fingerprintjs/fingerprintjs-pro-angular'
import { FingerprintService } from '@fingerprint/angular' // [!code ++]

// Update constructor injection
constructor(private fingerprintService: FingerprintjsProAngularService) {} // [!code --]
constructor(private fingerprintService: FingerprintService) {} // [!code ++]

// [!code --:2]
const { visitorId, requestId } = await this.fingerprintService.getVisitorData()
console.log(visitorId, requestId)
// [!code ++:2]
const { visitor_id, event_id } = await this.fingerprintService.getVisitorData()
console.log(visitor_id, event_id)
```

The v4 agent uses snake\_case field names. `requestId` is now `event_id`, and `visitorId` is now `visitor_id`. The `clearCache()` method has been removed from the service - if you need to clear the cache, interact directly with the storage you configured.