CngxExpandableText
projects/common/layout/text/expandable-text.ts
Import#
import { CngxExpandableText } from '@cngx/common/layout'
Description#
Molecule wrapping CngxTruncate with a built-in expand/collapse toggle.
Projects content into a truncated container and conditionally renders
a "Show more" / "Show less" button when the content is actually clamped.
Handles aria-expanded automatically.
Supports custom toggle templates via ng-template[cngxExpandableToggle] -
use for icon buttons or any custom UI instead of plain text labels.
Basic usage
<cngx-expandable-text [lines]="3">
Long text that may or may not overflow the container…
</cngx-expandable-text>Custom labels
<cngx-expandable-text [lines]="2" moreLabel="Mehr" lessLabel="Weniger">
Langer Text…
</cngx-expandable-text>Custom toggle template
<cngx-expandable-text [lines]="3">
Long text…
<ng-template cngxExpandableToggle let-expanded let-toggle="toggle">
<button (click)="toggle()">{{ expanded ? 'Collapse' : 'Expand' }}</button>
</ng-template>
</cngx-expandable-text>