Docs: Update Angular setup

contents/docs/libraries/angular.md

@@ -65,7 +65,71 @@ PostHog only captures pageview events when a [page load](https://developer.mozil
 
 If we want to capture every route change, we must write code to capture pageviews that integrates with the router.
 
-To do this, import `posthog` into `app-routing.module.ts`, subscribe to router events and then capture `$pageview` events on `NavigationEnd` events:
+To start, we need to add `capture_pageviews: false` to the PostHog initialization to avoid double capturing the first pageview.
+
+```ts file=main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import posthog from 'posthog-js'
+
+posthog.init(
+  '<ph_project_api_key>',
+  {
+    api_host:'<ph_client_api_host>',
+    person_profiles: 'identified_only',
+    capture_pageviews: false
+  }
+)
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+```
+
+Next, to track pageviews in Angular, we import the following in `app.component.ts`:
+
+1. `posthog`
+2. `Router`, `Event`, and `NavigationEnd` from `@angular/router`
+3. `Observable` from `rxjs` and `filter` from `rxjs/operators`
+
+With these, we set up a subscription to the router events that captures a `$pageview` event on every `NavigationEnd` event:
+
+```ts file=app.component.ts
+import { Component } from '@angular/core';
+import { RouterOutlet, Router, Event, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import posthog from 'posthog-js';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css'
+})
+export class AppComponent {
+  title = 'angular-spa';
+
+  navigationEnd: Observable<NavigationEnd>;
+
+  constructor(public router: Router) {
+    this.navigationEnd = router.events.pipe(
+      filter((event: Event) => event instanceof NavigationEnd)
+    ) as Observable<NavigationEnd>;
+  }
+
+  ngOnInit() {
+    this.navigationEnd.subscribe((event: NavigationEnd) => {
+      posthog.capture('$pageview');
+    });
+  }
+}
+```
+
+### Tracking pageviews in Angular v16 and below
+
+To track pageviews in Angular v16 and below, import `posthog` into `app-routing.module.ts`, subscribe to router events and then capture `$pageview` events on `NavigationEnd` events:
 
 ```js
 // other imports...
@@ -85,7 +149,31 @@ export class AppRoutingModule {
  }
 ```
 
-Now, every time a user moves between pages, PostHog captures a `$pageview` event, not just on the first page load. 
+Now, every time a user moves between pages, PostHog captures a `$pageview` event, not just on the first page load.
+
+## Capturing pageleaves
+
+Setting `capture_pageview: false` also disables automatic pageleave capture. To re-enable this, add `capture_pageleave: true` to your PostHog initialization.
+
+```ts file=main.ts
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+import posthog from 'posthog-js'
+
+posthog.init(
+  '<ph_project_api_key>',
+  {
+    api_host:'<ph_client_api_host>',
+    person_profiles: 'identified_only',
+    capture_pageviews: false,
+    capture_pageleave: true
+  }
+)
+
+bootstrapApplication(AppComponent, appConfig)
+  .catch((err) => console.error(err));
+```
 
 ## Next steps
 

contents/tutorials/angular-analytics.md

@@ -17,14 +17,16 @@ Angular is one of the original JavaScript web app frameworks and remains a popul
 
 This tutorial shows you how to set up the tools PostHog provides by creating a basic Angular app, adding PostHog, and then using it to capture events and manage feature flags.
 
+> **Note:** This tutorial uses Angular v16. To learn how to set up PostHog for v18, see our [Angular docs](/docs/libraries/angular).
+
 ## Creating our Angular app
 
 Angular has a powerful CLI we rely on for this tutorial. Install it by running `npm install -g @angular/cli` in your terminal.
 
 Once installed, create a new Angular app (with routing) and go into its folder. 
 
 ```bash
-ng new angular-ph --routing
+npx -p @angular/cli@16 ng new angular-ph --routing
 cd angular-ph
 ```
 
@@ -269,4 +271,3 @@ Now when you go to your app, a PostHog feature flag controls the button text.
 - [How to set up A/B tests in Angular](/tutorials/angular-ab-tests)
 - [How to set up surveys in Angular](/tutorials/angular-surveys)
 - [How to set up A/B/n testing](/tutorials/abn-testing)
-- [How to create custom surveys](/tutorials/survey)