Skip to main content
cngx-src documentation

CngxTagGroupHeader

Directivev0.1.0

projects/common/display/tag-group/slots/tag-group-header.directive.ts

Import#

import { CngxTagGroupHeader } from '@cngx/common/display'

Description#

Override template for the header zone of <cngx-tag-group> - projected ABOVE the row of tags. Use for label-prefix ("Filters"), count badges, sort toggles that span the group, or any header decoration the consumer wants to bundle with the layout.

The slot has no default body - when not projected, no DOM is rendered above the tag row. The reactive count of projected <span cngxTag> siblings is exposed via the slot context for consumer "Filters ({{ count }})" patterns without injection.

<cngx-tag-group [semanticList]="true" label="Filters">
  <ng-template cngxTagGroupHeader let-count="count">
    <strong>Filters ({{ count }})</strong>
  </ng-template>
  <span cngxTag>Frontend</span>
  <span cngxTag>Backend</span>
</cngx-tag-group>

https://cngxjs.github.io/cngx/examples/#/common/display/tag/app-wide-defaults-via-providetagconfig https://cngxjs.github.io/cngx/examples/#/common/display/tag/color-palette https://cngxjs.github.io/cngx/examples/#/common/display/tag/composition-with-cngxicon https://cngxjs.github.io/cngx/examples/#/common/display/tag/density https://cngxjs.github.io/cngx/examples/#/common/display/tag/group-semantic-list https://cngxjs.github.io/cngx/examples/#/common/display/tag/group-with-header-accessory https://cngxjs.github.io/cngx/examples/#/common/display/tag/layout-only-alignment https://cngxjs.github.io/cngx/examples/#/common/display/tag/layout-only-gap-variants https://cngxjs.github.io/cngx/examples/#/common/display/tag/link-mode https://cngxjs.github.io/cngx/examples/#/common/display/tag/slot-overrides-custom-label https://cngxjs.github.io/cngx/examples/#/common/display/tag/slot-overrides-prefix-label-suffix https://cngxjs.github.io/cngx/examples/#/common/display/tag/truncate-maxwidth https://cngxjs.github.io/cngx/examples/#/common/display/tag/variant-matrix

Metadata#

Index#

Properties

Instance Properties#

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