> ## 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/tree/v2.1.0) is an easy way to integrate Fingerprint into your Angular application. It supports all capabilities of the JavaScript agent and provides a built-in caching mechanism. You can view our [Angular quickstart](/docs/angular-quickstart) for a step-by-step guide to get started.

### How to install

Add `@fingerprintjs/fingerprintjs-pro-angular` as a dependency to your application via npm or yarn.

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

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

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

Add `FingerprintjsProAngularModule.forRoot()` to the imports sections in your root application module. 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.module.ts
import { NgModule } from '@angular/core'
import {
  FingerprintjsProAngularModule,
  FingerprintJSPro
} from '@fingerprintjs/fingerprintjs-pro-angular'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    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
        ],
        // region: "eu"
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Inject the `FingerprintjsProAngularService` 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 {
  ExtendedGetResult,
  FingerprintjsProAngularService,
  GetResult,
} from '@fingerprintjs/fingerprintjs-pro-angular'

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

  visitorId = 'Press "Identify" button to get visitorId'
  extendedResult: null | ExtendedGetResult | GetResult = null

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

### Documentation

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