Angular usage

Angular integration for ThumbmarkJS - browser fingerprinting library. Requires Angular 16+ (standalone APIs).

Installation

npm install @thumbmarkjs/thumbmarkjs @thumbmarkjs/angular

Setup

Standalone (Angular 16+)

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideThumbmark } from '@thumbmarkjs/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideThumbmark({
      apiKey: 'your-api-key', // optional
    }),
  ],
};

You can also pass configuration options:

provideThumbmark({
  apiKey: 'your-api-key',
  options: {
    timeout: 3000,
    exclude: ['webgl'],
  },
}),

Usage

Using AsyncPipe (recommended)

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ThumbmarkService } from '@thumbmarkjs/angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div *ngIf="thumbmarkService.isLoading$ | async">Loading...</div>
    <div *ngIf="!(thumbmarkService.isLoading$ | async)">
      <p>Thumbmark: {{ thumbmarkService.thumbmark$ | async }}</p>
      <p>Visitor ID: {{ thumbmarkService.visitorId$ | async }}</p>
      <button (click)="thumbmarkService.reload()">Reload</button>
    </div>
  `,
})
export class ExampleComponent {
  constructor(public thumbmarkService: ThumbmarkService) {}
}

The service automatically generates a thumbmark on construction. Call reload() to re-generate it on demand.

Subscribing manually

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { ThumbmarkService } from '@thumbmarkjs/angular';

@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="isLoading">Loading...</div>
    <div *ngIf="!isLoading">
      <p>Thumbmark: {{ thumbmark }}</p>
      <p>Visitor ID: {{ visitorId }}</p>
      <button (click)="reload()">Reload</button>
    </div>
  `,
})
export class ExampleComponent implements OnInit, OnDestroy {
  thumbmark: string | null = null;
  visitorId: string | null = null;
  isLoading = false;

  private subscriptions = new Subscription();

  constructor(private thumbmarkService: ThumbmarkService) {}

  ngOnInit(): void {
    this.subscriptions.add(
      this.thumbmarkService.thumbmark$.subscribe(v => (this.thumbmark = v))
    );
    this.subscriptions.add(
      this.thumbmarkService.visitorId$.subscribe(v => (this.visitorId = v))
    );
    this.subscriptions.add(
      this.thumbmarkService.isLoading$.subscribe(v => (this.isLoading = v))
    );
  }

  reload(): void {
    this.thumbmarkService.reload();
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }
}

API

provideThumbmark(config?)

Returns Angular providers for standalone applications.

Option	Type	Description
apiKey	string	Optional API key for the hosted ThumbmarkJS API
options	ThumbmarkOptions	Optional configuration options passed to the underlying Thumbmark instance

ThumbmarkService

Injectable service exposing the following observables:

Observable	Type	Description
thumbmark$	Observable<string | null>	The generated thumbmark hash
visitorId$	Observable<string | null>	The visitor ID (when API is used)
components$	Observable<Record<string, any> | null>	Raw fingerprint components
info$	Observable<Record<string, any> | null>	Additional info returned by the API
isLoading$	Observable<boolean>	Loading state
error$	Observable<Error | null>	Error state

Methods:

Method	Description
get()	Generate a thumbmark (called automatically on service construction)
reload()	Re-generate the thumbmark

The service is SSR-safe — it only runs on the client.

See also the configuration options.