Skip to main content
cngx-src documentation

CngxTocItemSlot

Directivev0.1.0

projects/ui/toc/toc-item-slot.ts

Import#

import { CngxTocItemSlot } from '@cngx/ui/toc'

Description#

Per-item template slot for CngxToc. Project an <ng-template cngxTocItem> inside <cngx-toc> to replace the built-in plain-label rendering with custom markup - the let- variables come out typed via ngTemplateContextGuard:

<cngx-toc [items]="toc" contentRoot="#article">
  <ng-template cngxTocItem let-item let-active="active" let-depth="depth">
    <span [class.is-active]="active">{{ item.label }}</span>
    @if (depth === 0) { <cngx-badge>{{ item.children?.length }}</cngx-badge> }
  </ng-template>
</cngx-toc>

Named CngxTocItemSlot (not *Directive) per the repo's no-artifact-suffix rule; the selector stays cngxTocItem, which is what consumers write. Resolves ahead of CNGX_TOC_CONFIG.templates.item and the built-in label.

https://cngxjs.github.io/cngx/examples/#/ui/toc/slots/custom-item-template

Metadata#

Index#

Instance Properties#

templateRef#unknown
Readonly
inject<TemplateRef<CngxTocItemContext>>(TemplateRef)

Methods#

ngTemplateContextGuard#CngxTocItemContext
Static
ngTemplateContextGuard(_dir: CngxTocItemSlot, ctx: unknown)
@param_dirCngxTocItemSlot
@paramctxunknown