# Angular web analytics installation - Docs

1.  1

    ## Install the package

    Required

    Install the PostHog JavaScript library using your package manager:

    PostHog AI

    ### npm

    ```bash
    npm install posthog-js
    ```

    ### yarn

    ```bash
    yarn add posthog-js
    ```

    ### pnpm

    ```bash
    pnpm add posthog-js
    ```

2.  2

    ## Initialize PostHog

    Required

    In your `src/main.ts`, initialize PostHog using your project token and instance address:

    ## Angular 17+

    For Angular v17 and above, you can set up PostHog as a singleton service. To do this, start by creating and injecting a `PosthogService` instance.

    Create a service by running `ng g service services/posthog`. The service should look like this:

    src/main.ts

    PostHog AI

    ```typescript
    // src/app/services/posthog.service.ts
    import { DestroyRef, Injectable, NgZone } from "@angular/core";
    import posthog from "posthog-js";
    import { environment } from "../../environments/environment";
    import { Router } from "@angular/router";
    @Injectable({ providedIn: "root" })
    export class PosthogService {
      constructor(
        private ngZone: NgZone,
        private router: Router,
        private destroyRef: DestroyRef,
      ) {
        this.initPostHog();
      }
      private initPostHog() {
        this.ngZone.runOutsideAngular(() => {
          posthog.init(environment.posthogKey, {
            api_host: environment.posthogHost,
            defaults: '2026-01-30',
          });
        });
      }
    }
    ```

    The service is initialized [outside of the Angular zone](https://angular.dev/api/core/NgZone#runOutsideAngular) to reduce change detection cycles. This is important to avoid performance issues with session recording. Then, inject the service in your app's root component `app.component.ts`. This will make sure PostHog is initialized before any other component is rendered.

    src/app/app.component.ts

    PostHog AI

    ```typescript
    // src/app/app.component.ts
    import { Component } from "@angular/core";
    import { RouterOutlet } from "@angular/router";
    import { PosthogService } from "./services/posthog.service";
    @Component({
      selector: "app-root",
      styleUrls: ["./app.component.scss"],
      template: `
        <router-outlet />`,
      imports: [RouterOutlet],
    })
    export class AppComponent {
      title = "angular-app";
      constructor(posthogService: PosthogService) {}
    }
    ```

    ## Angular 16 and below

    In your `src/main.ts`, initialize PostHog using your project API key and instance address. You can find both in your [project settings](https://us.posthog.com/project/settings).

    src/main.ts

    PostHog AI

    ```typescript
    // src/main.ts
    import { bootstrapApplication } from '@angular/platform-browser';
    import { appConfig } from './app/app.config';
    import { AppComponent } from './app/app.component';
    import { environment } from "./environments/environment";
    import posthog from 'posthog-js'
    posthog.init(environment.posthogKey, {
      api_host: environment.posthogHost,
      defaults: '2025-11-30'
    })
    bootstrapApplication(AppComponent, appConfig)
      .catch((err) => console.error(err));
    ```

3.  3

    ## Send events

    Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

    If you'd like, you can also manually capture custom events:

    JavaScript

    PostHog AI

    ```javascript
    posthog.capture('my_custom_event', { property: 'value' })
    ```

4.  4

    ## Next steps

    Recommended

    After installing PostHog and ensuring [autocapture](/docs/data/autocapture.md) is enabled, head to your [web analytics dashboard](/docs/web-analytics/dashboard.md) to see your data. And then check out our [getting started](/docs/web-analytics/getting-started.md) guide.

    > **PostHog tip:** Web analytics works with [anonymous events](/docs/data/anonymous-vs-identified-events.md). This means if you are primarily using PostHog for web analytics, it can be significantly cheaper for you.

### Community questions

Ask a question

### Was this page useful?

HelpfulCould be better