Title

Reactive wrapper around Angular Router's route title. Access the resolved route title as a writable signal that can be set to update the page title.

Usage

import { Component } from '@angular/core';
import { title } from '@signality/core';

@Component({
  template: `
    <h1>{{ pageTitle() ?? 'Default Title' }}</h1>
  `,
})
export class ProductPage {
  readonly pageTitle = title(); 
}

Parameters

Parameter	Type	Description
options	TitleOptions	Optional configuration (see Options below)

Options

The TitleOptions extends CreateSignalOptions<string> and WithInjector:

Option	Type	Default	Description
equal	ValueEqualityFn<string>	-	Custom equality function (see more)
debugName	string	-	Debug name for the signal (development only)
injector	Injector	-	Optional injector for DI context

Return Value

Returns a WritableSignal<string> containing the current route title. The signal can be updated using set() or update() methods, which will also update the page title via Angular's Title service.

Examples

Display route title

import { Component } from '@angular/core';
import { title } from '@signality/core';

@Component({
  template: `
    <header>
      <h1>{{ pageTitle() ?? 'My App' }}</h1>
    </header>
    <router-outlet />
  `,
})
export class App {
  readonly pageTitle = title(); 
}

Title from resolver

import { Component } from '@angular/core';
import { title } from '@signality/core';

// Route configuration:
// {
//   path: 'product/:id',
//   component: ProductPage,
//   title: route => `Product ${route.params['id']}`
// }

@Component({
  template: `
    <h1>{{ pageTitle() }}</h1>
  `,
})
export class ProductPage {
  readonly pageTitle = title(); // Will be "Product 123" for /product/123
}

Updating title

import { Component, effect, inject } from '@angular/core';
import { title } from '@signality/core';
import { MessagesStore } from './messages';

@Component({ /* ... */ })
export class MessagesPage {
  readonly pageTitle = title();
  readonly messages = inject(MessagesStore);

  constructor() {
    effect(() => {
      const count = this.messages.unreadCount();
      this.pageTitle.set(count > 0 ? `(${count}) Messages` : 'Messages'); 
    });
  }
}

SSR Compatibility

On the server, the signal initializes with the title from the snapshot.

Type Definitions

type TitleOptions = CreateSignalOptions<string> & WithInjector;

function title(options?: TitleOptions): WritableSignal<string>;

Related

• params — Access route parameters
• queryParams — Access query parameters
• fragment — Access URL fragment
• url — Access current URL
• routeData — Access route data

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousRouterListenerNextUrl