Skip to main content
cngx-src documentation

CngxTabGroupPresenter

DirectivePrimaryv0.1.0WCAG AA

projects/common/tabs/presenter.directive.ts

Import#

import { CngxTabGroupPresenter } from '@cngx/common/tabs'

Description#

Tab-group presenter - brain of every CNGX tab flow.
Owns the active-index model, the tab registry, orientation, loop policy, and the commit-controller lifecycle.
Provides CNGX_TAB_GROUP_HOST for atoms and CNGX_STATEFUL so <cngx-toast-on /> / <cngx-banner-on /> compose without [state] wiring.

Layer: @cngx/common/tabs.
Directive-only - organisms compose via hostDirectives, consumers attach [cngxTabGroup] directly.

https://cngxjs.github.io/cngx/examples/#/ui/tabs/tab-commit-action/optimistic-pessimistic-commits-with-bridge-directives

Metadata#

Providers#

CNGX_TAB_GROUP_HOST
useExisting CngxTabGroupPresenter
CNGX_STATEFUL
useExisting CngxTabGroupPresenter

Relationships

Index#

Inputs#

activeIndex#number
model()
default 0
input()
default true
orientation#"horizontal" | "vertical"
input()
default 'horizontal'

Outputs#

activeIndex#number
model()
tabAdd#void
output()

Emitted when the add-tab affordance is activated. The consumer appends a tab to its own data; the presenter owns no creation logic.

output()

Emitted when a tab's close affordance is activated (the close button or Delete/Backspace on the focused tab). The presenter has already moved the active index onto the surviving neighbour; the consumer removes the tab from its own data in the handler.

Instance Properties#

commitState#CngxAsyncState
Readonly
this.commitController.state
commitTransition#StatusTransition
Readonly

Current/previous pair for commitState.status(). Skin sub-components feed <span cngxLiveRegion> from this tracker for declarative SR announcements. Shared across consumers so the tracker's linkedSignal is allocated once per presenter.

createTransitionTracker(() =>
  this.commitController.state.status(),
)
intendedIndex#Signal
Readonly

Index the user is currently trying to commit to. Tracked separately from state.data() (which only updates on success) to drive per-tab aria-busy.

this.commitController.intendedValue
lastFailedIndex#Signal
Readonly

{@inheritDoc CngxTabGroupHost.lastFailedIndex}

this.lastFailedIndexState.asReadonly()
originIndexDuringCommit#Signal
Readonly

{@inheritDoc CngxTabGroupHost.originIndexDuringCommit}

this.originIndexDuringCommitState.asReadonly()
Readonly

Producer surface for the CNGX_STATEFUL bridge contract.

this.commitController.state
Readonly
this.tabsState.asReadonly()

Methods#

clearLastFailed#void

{@inheritDoc CngxTabGroupHost.clearLastFailed}

register#void
register(handle: CngxTabHandle)
@paramhandleCngxTabHandle
requestAdd#void
requestClose#void
requestClose(id: string)
@paramidstring
select#void
select(index: number)
@paramindexnumber
selectById#void
selectById(id: string)
@paramidstring
selectNext#void
selectPrevious#void
unregister#void
unregister(id: string)
@paramidstring