RouteData

Reactive wrapper around Angular Router's route data. Access route data as signals with full type-safety.

Usage

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

@Component({
  template: `
    <h1>{{ routeData().name }}</h1>
  `,
})
export class ProductPage {
  readonly routeData = routeData<{ name: string }>(); 
}

Parameters

Parameter	Type	Description
options	RouteDataOptions<T>	Optional configuration (see Options below)

Options

The RouteDataOptions extends CreateSignalOptions<T> and WithInjector:

Option	Type	Default	Description
equal	ValueEqualityFn<T>	-	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 Signal<T> containing the current route data, where T defaults to unknown.

Examples

Type-safe route data

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

interface ProductData {
  product: {
    id: number;
    name: string;
    price: number;
  };
  category?: string;
}

@Component({
  template: `
    <h1>{{ data().product.name }}</h1>
    <p>Price: ${{ data().product.price }}</p>
    <p>Category: {{ data().category ?? 'Uncategorized' }}</p>
  `,
})
export class ProductDetail {
  readonly data = routeData<ProductData>(); 
}

With route resolver

import { Component, computed, inject } from '@angular/core';
import { routeData } from '@signality/core';
import { UserService } from './user.service';

// Route resolver
export const userResolver: ResolveFn<User> = (route, state) => {
  const userService = inject(UserService);
  return userService.getUser(route.params['id']);
};

// Route configuration
export const routes: Routes = [
  {
    path: 'user/:id',
    component: UserProfile,
    resolve: { user: userResolver }, 
  },
];

// Component
@Component({
  template: `
    @if (user(); as user) {
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    }
  `,
})
export class UserProfile {
  readonly routeData = routeData<{ user: User }>();
  readonly user = computed(() => this.routeData().user); 
}

Static route data

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

// Route configuration
export const routes: Routes = [
  {
    path: 'about',
    component: AboutPage,
    data: { showBreadcrumbs: true }, 
  },
];

// Component
@Component({
  template: `
    @if (pageData().showBreadcrumbs) {
      <nav>...</nav>
    }
  `,
})
export class AboutPage {
  readonly pageData = routeData<{ showBreadcrumbs: boolean }>(); 
}

SSR Compatibility

On the server, the signal initializes with the route data from the snapshot.

Type Definitions

type RouteDataOptions<T = unknown> = CreateSignalOptions<T> & WithInjector;

function routeData<T = unknown>(options?: RouteDataOptions<T>): Signal<T>;

Related

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

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

PreviousQueryParamsNextRouterListener