TextClampDirective

Defined in: directives/text-clamp/text-clamp.directive.ts:99

Clamps text to its available space and appends a custom ellipsis.

Remarks

Limits content automatically to the available size of the parent container. Takes Line height into account as well as preserving whole words. Works with changing input in form of signals as well as static input.

Examples

<p
  textClamp
  [text]="myText()"
  [ellipsis]="'… more'"
></p>

@Component({
  standalone: true,
  selector: 'app-foo',
  imports: [TextClampDirective]
})
export class ArticleCardComponent {
  protected myText: WritableSignal<string> = signal<string>("...");

  protected onMyEvent(): void {
   this.myText.set("something else...")
  }
}

Since

1.2.0

Author

Ian Wenneckers

Implements

• AfterViewInit

Constructors

Constructor

new TextClampDirective(): TextClampDirective;

Returns

TextClampDirective

Properties

Property	Modifier	Type	Default value	Description	Defined in
ellipsis	readonly	InputSignal<string>	"..."	The string used as an ellipsis. Remarks This value can be customized to control how truncated text is indicated.	directives/text-clamp/text-clamp.directive.ts:128
text	readonly	InputSignal<string | undefined>	undefined	The text value for this input. Remarks This property is required. Accepts a string or undefined.	directives/text-clamp/text-clamp.directive.ts:119

Methods

getClampedText()

getClampedText(): string | undefined;

Defined in: directives/text-clamp/text-clamp.directive.ts:207

Calculates the multiline ellipsis by measuring word widths against the available space and line count.

Returns

string | undefined

clamped text or undefined if measurement went wrong

---

ngAfterViewInit()

ngAfterViewInit(): void;

Defined in: directives/text-clamp/text-clamp.directive.ts:145

A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.

Returns

void

Implementation of

AfterViewInit.ngAfterViewInit

---

setText()

setText(text): void;

Defined in: directives/text-clamp/text-clamp.directive.ts:171

Parameters

Parameter	Type
text	string

Returns

void