CngxTabsFragmentSync
projects/common/tabs/router-sync.directive.ts
Import#
import { CngxTabsFragmentSync } from '@cngx/common/tabs'
Description#
URL deep-linking for tab groups.
Bidirectional sync between activeId and a URL fragment or query-param. Opt-in via
[cngxTabsFragmentSync] on the presenter element.
mode = 'fragment'(default) →#tab=settingsmode = 'queryParam'withparamName = 'tab'→?tab=settings
Reflecting the active tab replaces the current history entry by
default, so browser-back leaves the page instead of stepping through
the tabs opened on the way. Set [replaceUrl]="false" when the tabs
read as distinct destinations.
Router is optional - without it the directive logs a dev warning
via afterNextRender and becomes a no-op.
Every router.navigate and host.selectById inside the effects sits in untracked().
<!-- Default fragment mode: the active tab reflects to #tab=<id>, and a
deep link like /account#tab=settings selects that tab on load. -->
<cngx-tab-group cngxTabsFragmentSync>
<div cngxTab id="overview" label="Overview"></div>
<div cngxTab id="settings" label="Settings"></div>
</cngx-tab-group>
<!-- Query-param mode with a custom name -> ?section=settings -->
<cngx-tab-group cngxTabsFragmentSync mode="queryParam" paramName="section">
<!-- ...tabs... -->
</cngx-tab-group>Metadata#
Index#
Inputs#
Whether reflecting the active tab into the URL replaces the current
history entry instead of pushing a new one. Default true, which is
right for a view toggle: browser-back leaves the page rather than
stepping through the tabs the user opened on the way.
Set false when the tabs read as distinct destinations and back
should step between them. Note that every tab switch then costs a
history entry.
trueMethods#
Seed from the URL before the group renders its panels. CngxTab
registers in ngOnInit, so the registry is populated by the time
this runs, and the group's own view has not rendered yet - which is
what keeps panelMode="lazy" from counting the default tab's first
render as its first activation on a deep link.
Unlike CngxTabsRouteSync, this seed goes through
selectById, so it runs select() and any consumer-bound
commit-action. Moving it earlier therefore also moves when that
action first fires; it still fires exactly once for the seed.
Its own router guard: the constructor's early return does not stop lifecycle hooks from running.