The @tracio/angular package wraps the core @tracio/sdk and exposes idiomatic Angular primitives: a provider you spread into your application config, and a signal-based service you inject anywhere.
npm install @tracio/angular @tracio/sdk@angular/core (17, 18, or 19) is a peer dependency and is expected to already be installed in your app.
Spread provideTracio(config) into your ApplicationConfig.providers.
// app.config.tsimport { provideTracio } from "@tracio/angular"export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: "tracio_pk_…" })],}Inject TracioService to read the identification state through readonly signals:
| Member | Type | Description |
|---|---|---|
visitorId() | Signal<string | undefined> | The stable visitor identifier. |
result() | Signal<TracioResult | undefined> | The full identification result. |
error() | Signal<Error | undefined> | The last error, if any. |
isLoading() | Signal<boolean> | Whether a fetch is in flight. |
getVisitorData() | method | (Re-)fetch the visitor data imperatively. |
// home.component.tsimport { Component, inject } from "@angular/core"import { TracioService } from "@tracio/angular"@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })export class HomeComponent { readonly tracio = inject(TracioService)}Call getVisitorData() to defer or re-trigger identification — for example only after the user grants consent.
// app.config.tsimport { provideTracio } from "@tracio/angular"export const appConfig: ApplicationConfig = { providers: [provideTracio({ publicKey: "tracio_pk_…" })],}// home.component.tsimport { Component, inject } from "@angular/core"import { TracioService } from "@tracio/angular"@Component({ selector: "app-home", template: `<span>{{ tracio.visitorId() }}</span>` })export class HomeComponent { readonly tracio = inject(TracioService)}@tracio/sdk API the service builds on