Skip to main content
NeuralUIv1.14.3New
GitHub
Component

URL State

NeuUrlStateService synchronizes UI state with URL query params. Parameters are reactive signals, work with the browser Back button and can be shared as links.

TypeScript
import { NeuUrlStateService } from '@neural-ui/core/url-state';

getParam + setParam

getParam('q')() → null
getParam('page')() → null
getParam('sort')() → null

patchParams (updates multiple params in a single navigation)

clearParams (removes all query params)

Current params

No params — clean URL ✓
TypeScript
import { NeuUrlStateService } from '@neural-ui/core/url-state';

@Component({ ... })
export class MyComponent {
  private readonly urlState = inject(NeuUrlStateService);

  // Reactive read (Signal) — updates on each NavigationEnd
  readonly q    = this.urlState.getParam('q');
  readonly page = this.urlState.getParam('page');
  readonly sort = this.urlState.getParam('sort');

  setSearch(value: string): void {
    // Writes '?q=...' to the URL without creating a history entry
    this.urlState.setParam('q', value || null);
  }

  applyFilters(): void {
    // Updates multiple params in a single navigation
    this.urlState.patchParams({ q: 'angular', page: '1', sort: 'name' });
  }

  clearAll(): void {
    // Removes all query params from the URL
    this.urlState.clearParams();
  }
}