Fragment
Reactive wrapper around Angular Router's URL fragment. Access the hash fragment as a signal.
Usage
angular-ts
import { Component } from '@angular/core';
import { fragment } from '@signality/core';
@Component({
template: `
<nav>
<a href="#overview">Overview</a>
<a href="#details">Details</a>
<a href="#reviews">Reviews</a>
</nav>
<p>Current section: {{ fragment() ?? 'none' }}</p>
`,
})
export class ProductPage {
readonly fragment = fragment();
}Parameters
| Parameter | Type | Description |
|---|---|---|
options | FragmentOptions | Optional configuration (see Options below) |
Options
The FragmentOptions extends CreateSignalOptions<string | null> and WithInjector:
| Option | Type | Default | Description |
|---|---|---|---|
equal | ValueEqualityFn<string | null> | - | 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<string | null> containing the current URL fragment (without the #), or null if no fragment exists.
SSR Compatibility
On the server, the signal initializes with the fragment from the snapshot.
Type Definitions
typescript
type FragmentOptions = CreateSignalOptions<string | null> & WithInjector;
function fragment(options?: FragmentOptions): Signal<string | null>;Related
- params — Access route parameters
- queryParams — Access query parameters
- url — Access current URL