CngxTruncate

DirectivePrimaryv0.1.0WCAG AA

projects/common/layout/text/truncate.directive.ts

Import#

import { CngxTruncate } from '@cngx/common/layout'

Description#

Manages text truncation with expand/collapse state detection.

Applies -webkit-line-clamp when collapsed and detects whether the text is actually clamped (content overflows). Exposes isClamped so the consumer can conditionally show a "Show more" toggle only when needed.

The expanded state supports two-way binding (controlled + uncontrolled).

Basic truncation with toggle

<p [cngxTruncate]="3" [(expanded)]="expanded" #trunc="cngxTruncate">
  Long text content that may or may not overflow…
</p>
@if (trunc.isClamped() || trunc.expanded()) {
  <button (click)="expanded.set(!expanded())"
          [attr.aria-expanded]="expanded()">
    {{ expanded() ? 'Show less' : 'Show more' }}
  </button> * }

https://cngxjs.github.io/cngx/examples/#/common/layout/truncate/short-text-no-toggle https://cngxjs.github.io/cngx/examples/#/common/layout/truncate/truncated-text-with-toggle

Metadata#

Selector: [cngxTruncate]
Export as: cngxTruncate

Host#

Bound styles: -webkit-line-clamp ← clampValue display ← displayValue -webkit-box-orient ← orientValue overflow ← overflowValue

Relationships

Used by1

componentCngxExpandableTextMolecule wrapping `CngxTruncate` with a built-in expand/collapse toggle.

Index#

Inputs#

expanded#boolean

model()

Whether the text is expanded (full content visible). Supports two-way binding.

default false

lines#number

input()

Maximum number of visible lines when collapsed.

default 3, { alias: 'cngxTruncate' }

Outputs#

expanded#boolean

model()

Whether the text is expanded (full content visible). Supports two-way binding.

Instance Properties#

isClamped#unknown

Readonly

Whether the text content actually exceeds the line limit and is being clamped.

this.isClampedState.asReadonly()

HostBindings#

Binding	Expression
`[style.-webkit-line-clamp]`	`clampValue()`
`[style.display]`	`displayValue()`
`[style.-webkit-box-orient]`	`orientValue()`
`[style.overflow]`	`overflowValue()`

CngxTruncate

Import#

Description#

Basic truncation with toggle#

Related#