---
title: "Angular"
description: "Use a root-provided service and guard initialization with isPlatformBrowser when the application uses server rendering."
documentation: "https://tracwell.app/docs/frameworks/angular"
markdown: "https://tracwell.app/docs/frameworks/angular.md"
---

# Angular

> Use a root-provided service and guard initialization with isPlatformBrowser when the application uses server rendering.

## Initialize Tracwell

```ts
import { isPlatformBrowser } from "@angular/common";
import { inject, Injectable, PLATFORM_ID } from "@angular/core";
import { createTracwell } from "tracwell";

@Injectable({ providedIn: "root" })
export class AnalyticsService {
  private readonly platformId = inject(PLATFORM_ID);

  readonly client = isPlatformBrowser(this.platformId)
    ? createTracwell({
        collectionMode: "product",
        projectKey: "tw_live_...",
      })
    : null;
}

// Inject AnalyticsService once in the root App component.
```

Angular Router navigation is tracked automatically when it updates browser history. Use client?.track() for custom events.

## Track an event

Keep the initialized client available to the component or service that owns the successful product outcome. Call `track()` only after that outcome completes.

```ts
const eventId = analytics.track("signup_completed", {
  plan: "starter",
  source: "pricing",
});

if (!eventId) {
  // Collection is blocked or the event did not pass validation.
}
```

See the [custom events guide](https://tracwell.app/docs/events.md) for naming, property limits, and verification.