docs: Adds guide for customizing page titles with TitleStrategy (angular#64238)

Improves documentation by explaining how to implement and configure a custom title strategy for centralized control over page titles

PR Close angular#64238

Author: SkyZeroZx

adev/src/content/guide/routing/define-routes.md

@@ -299,6 +299,44 @@ const routes: Routes = [
 
 Route titles can also be set via a service extending the [`TitleStrategy`](/api/router/TitleStrategy) abstract class. By default, Angular uses the [`DefaultTitleStrategy`](/api/router/DefaultTitleStrategy).
 
+### Using TitleStrategy for page titles
+
+For advanced scenarios where you need centralized control over how the document title is composed, implement a `TitleStrategy`.
+
+`TitleStrategy` is a token you can provide to override the default title strategy used by Angular. You can supply a custom `TitleStrategy` to implement conventions such as adding an application suffix, formatting titles from breadcrumbs, or generating titles dynamically from route data.
+
+```ts
+import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class AppTitleStrategy extends TitleStrategy {
+  private readonly title = inject(Title);
+
+  updateTitle(snapshot: RouterStateSnapshot): void {
+    // PageTitle is equal to the "Title" of a route if it's set
+    // If its not set it will use the "title" given in index.html
+    const pageTitle = this.buildTitle(snapshot) || this.title.getTitle();
+    this.title.setTitle(`MyAwesomeApp - ${pageTitle}`);
+  }
+}
+```
+
+To use the custom strategy, provide it with the `TitleStrategy` token at the application level:
+
+```ts
+import { provideRouter, TitleStrategy } from '@angular/router';
+import { AppTitleStrategy } from './app-title.strategy';
+
+export const appConfig = {
+  providers: [
+    provideRouter(routes),
+    { provide: TitleStrategy, useClass: AppTitleStrategy },
+  ],
+};
+```
+
 ## Route-level providers for dependency injection
 
 Each route has a `providers` property that lets you provide dependencies to that route's content via [dependency injection](/guide/di).

packages/router/src/page_title_strategy.ts

@@ -33,7 +33,7 @@ import {PRIMARY_OUTLET, RouteTitleKey} from './shared';
  * incorporate titles in named outlets.
  *
  * @publicApi
- * @see [Page title guide](guide/routing/common-router-tasks#setting-the-page-title)
+ * @see [Page title guide](guide/routing/define-routes#using-titlestrategy-for-page-titles)
  */
 @Injectable({providedIn: 'root', useFactory: () => inject(DefaultTitleStrategy)})
 export abstract class TitleStrategy {