URL State

Conecta Angular Router

URL State permite compartir una vista: los parámetros guardan la página seleccionada, la pestaña activa o la navegación abierta. Importa NeuUrlStateService desde @neural-ui/core/url-state e inyéctalo en el componente de aplicación que gobierna esas decisiones. Se proporciona en root; configura Angular Router con provideRouter(tusRutas), sin añadir otro provider del servicio.

Table, Tabs y Sidebar reciben inputs aplicados y emiten propuestas. La aplicación convierte valores validados de la URL en esos inputs y escribe las propuestas aceptadas en la URL. Crea cada signal de getParam una sola vez como propiedad de clase. No necesitas un effect que convierta las lecturas de URL en nuevas escrituras.

import { ApplicationConfig } from '@angular/core';
import { provideRouter, Routes } from '@angular/router';

const routes: Routes = []; // Add your application's routes here.

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)],
};

Table: búsqueda, ordenación y paginación

Busca un cliente, ordena una columna o pasa a la página siguiente. La aplicación transforma ordersPage, ordersSize, ordersSearch, ordersSort y ordersDir en NeuTableQuery. Las páginas de la URL empiezan en 1; los índices de Table empiezan en 0. El tamaño y la ordenación se validan contra valores permitidos y la página se limita a las filas coincidentes. Esta receta conserva búsqueda global, ordenación y paginación; filters permanece en null.

Aceptamos queryChange mediante una llamada a patchParams. Escribir reinicia la página y sustituye la entrada actual del historial; ordenar y paginar añaden entradas. Recarga la URL resultante o utiliza Atrás y Adelante para restaurar la consulta aplicada. Código incluye las filas, columnas y etiquetas bilingües compartidas que utiliza el ejemplo.

Tabs: comparte el panel activo

Selecciona Actividad para escribir detailsTab=activity. activeId se deriva de un signal de getParam creado una sola vez; un valor ausente o desconocido selecciona Resumen. activeIdChange escribe únicamente un identificador aceptado. Resumen elimina el parámetro del ejemplo mediante null.

Ambas pestañas crean entradas de historial. Atrás y Adelante actualizan el panel seleccionado mediante activeId sin provocar otra escritura de URL. Recarga o comparte una URL terminada en ?detailsTab=activity para abrir directamente ese panel.

Sidebar: acepta solicitudes de cierre

Abre la navegación para escribir navigationOpen=true. Solo esa cadena exacta abre el overlay; los valores ausentes o desconocidos lo mantienen cerrado. La aplicación proporciona [open] y acepta closeRequested eliminando el parámetro. Escape, el fondo y el control de cierre siguen ese mismo camino gobernado por la aplicación.

Abrir y cerrar crean entradas de historial. Atrás puede cerrar o reabrir Sidebar, y recargar un enlace compartido restaura su apertura. opened y closed sirven para observar, no para persistir: escribir desde ellos convertiría una restauración en otra navegación. Este ejemplo utiliza el modo overlay; un Sidebar persistente se muestra siempre y no utiliza open para alternar su visibilidad.

API del servicio

El servicio expone un signal de solo lectura y cuatro métodos públicos. Las escrituras devuelven void y delegan la navegación a Angular Router; no devuelven una promesa de finalización. Los valores son cadenas y null se reserva para eliminar. setParam y patchParams mezclan los cambios con los demás parámetros de consulta.

setParam agrupa llamadas síncronas en una microtarea. patchParams actualiza valores relacionados en una navegación e incluye los cambios de setParam pendientes. Las escrituras pendientes aparecen en params antes de terminar la navegación; si esta se cancela o un guard la rechaza, pueden restaurarse los valores reales del Router. En un lote, cualquier petición con replaceUrl=false hace que la navegación resultante cree una entrada de historial.

Historial, validación y reinicio

replaceUrl es true por defecto: sustituye la entrada actual del historial. Pasa false para acciones deliberadas que el usuario deba poder deshacer con Atrás. Reiniciar elimina solo las claves de cada ejemplo mediante patchParams o setParam, conservando las de los demás y cualquier parámetro ajeno. clearParams elimina todos los parámetros y debe reservarse para un reinicio intencional de toda la página.

Trata los valores de URL como cadenas no fiables: valida números, enumeraciones y parámetros repetidos antes de proporcionar inputs. Estos ejemplos aplican valores seguros sin reescribir URLs inválidas al renderizar. Evita secretos o datos personales en parámetros compartidos. Con SSR, deriva el estado inicial de la petición enrutada de manera consistente en servidor y cliente; estas recetas no necesitan localStorage ni acceso a objetos globales del navegador.

Public Types

Consulta las definiciones de los tipos enlazados en esta página.

import type { NeuFilterConstraint } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuFilterConstraint<F extends string> {
  readonly field: F;
  readonly kind: 'condition';
  readonly rule: 'equals' | 'notEquals' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'lessThan' | 'lessThanOrEqual' | 'greaterThan' | 'greaterThanOrEqual' | 'between' | 'in' | 'notIn' | 'isNull' | 'isNotNull' | 'isEmpty' | 'isNotEmpty';
  readonly value: unknown;
}

import type { NeuFilterConstraint } from '@neural-ui/core/table';
import type { NeuFilterGroup } from '@neural-ui/core/table';

import type { NeuFilterExpression } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuFilterExpression<F extends string> = NeuFilterConstraint<F> | NeuFilterGroup<F>;

import type { NeuFilterExpression } from '@neural-ui/core/table';
import type { NeuFilterOperator } from '@neural-ui/core/table';

import type { NeuFilterGroup } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuFilterGroup<F extends string> {
  readonly children: readonly NeuFilterExpression<F>[];
  readonly kind: 'group';
  readonly operator: NeuFilterOperator;
}

import type { NeuFilterOperator } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuFilterOperator = 'and' | 'or';

import type { NeuSortDirection } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export type NeuSortDirection = 'asc' | 'desc';

import type { NeuSortDirection } from '@neural-ui/core/table';

import type { NeuSortEntry } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuSortEntry<F extends string> {
  readonly direction: NeuSortDirection;
  readonly field: F;
}

import type { NeuFilterExpression } from '@neural-ui/core/table';
import type { NeuSortEntry } from '@neural-ui/core/table';

import type { NeuTableQuery } from '@neural-ui/core/table';

// Declaración pública (solo referencia)
export interface NeuTableQuery<F extends string> {
  readonly filters: NeuFilterExpression<F> | null;
  readonly page: number;
  readonly pageSize: number;
  readonly search: string;
  readonly sort: readonly NeuSortEntry<F>[];
}