Skip to main content
cngx-src documentation

CngxTagLabel

Directivev0.1.0

projects/common/display/tag/slots/tag-label.directive.ts

Import#

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

Description#

Override template for the label region of <span cngxTag>.

The default label slot wraps projected content in <span class="cngx-tag__label"> so text-overflow: ellipsis has a shrinkable inner with min-width: 0. Replace this slot when you need a different inner element (e.g. <bdi> for bidi-safe rendering, an inline link, or a richer label composition with icons + counts).

Replacing the label drops the default ellipsis hook - the consumer template owns the overflow strategy.

<span cngxTag [color]="'success'">
  <ng-template cngxTagLabel>
    <bdi>{{ user.name }}</bdi>
  </ng-template>
</span>

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<CngxTagLabelContext>>(TemplateRef)