Fragment

Reactive wrapper around Angular Router's URL fragment. Access the hash fragment as a writable signal.

Usage

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
replaceUrl	boolean	false	When true, updating the fragment will replace the current state in history. (see more)

Return Value

Returns a WritableSignal<string | null> containing the current URL fragment (without the #), or null if no fragment exists.

Examples

With { replaceUrl: true }

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { fragment } from '@signality/core';

@Component({
  imports: [FormsModule],
  template: `
    <nav>
      <select [(ngModel)]="fragment"> 
        <option value="section-1">Section 1</option>
        <option value="section-2">Section 2</option>
      </select>
    </nav>

    <section id="section-1">...</section>
    <section id="section-2">...</section>
  `,
})
export class ProductPage {
  readonly fragment = fragment({ replaceUrl: true }); 
}

SSR Compatibility

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

Type Definitions

type FragmentOptions = CreateSignalOptions<string | null> &
  WithInjector &
  Pick<NavigationExtras, 'replaceUrl'>;

function fragment(options?: FragmentOptions): WritableSignal<string | null>;

Related

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

Edit this page on GitHub Last updated: Apr 27, 2026, 21:07:43

PreviousThrottleCallbackNextParams