javascript / expert
Snippet
Declarative Route Data Resolution via Signal Bridge
Bridging RxJS observables from the ActivatedRoute to Signals allows for a more modern, signal-based component architecture. Using `toSignal` ensures that route data changes are handled reactively and can be used within `computed` values for derived state without manual subscription management.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ActivatedRoute } from '@angular/router';import { toSignal } from '@angular/core/rxjs-interop';import { Component, inject, computed } from '@angular/core';@Component({template: `<h1>{{ title() }}</h1>`})export class DetailComponent {private route = inject(ActivatedRoute);private data = toSignal(this.route.data);title = computed(() => this.data()?.['pageTitle'] ?? 'Default');}
angular
Breakdown
1
private data = toSignal(this.route.data);
Converts an asynchronous observable stream into a reactive signal value.
2
title = computed(() => this.data()?.['pageTitle'] ?? 'Default');
Creates a derived signal that automatically recalculates when the route data changes.