API Reference

---

API Reference / @dasch-ng/utils / src / OverflowDirective

Class: OverflowDirective

Defined in: libs/ng/utils/src/lib/overflow.directive.ts:26

Tracks whether the content of an element is cut off, horizontally (text-overflow: ellipsis) or vertically (line-clamp, fixed height). Typical use: show a tooltip or a "more" toggle only when the text does not fit.

Re-checks when the element is resized or its text changes. Sets data-overflowing on the host while content is cut off, so styles can react without a class binding. Runs only in the browser, after the first render.

Example

<span class="ellipsis" daschNgOverflow #name="daschNgOverflow" [title]="name.overflowing() ? file.name : ''">
  {{ file.name }}
</span>

<p class="clamp-3" daschNgOverflow (overflowChange)="showMore.set($event)">{{ description }}</p>

Constructors

Constructor

new OverflowDirective(): OverflowDirective

Defined in: libs/ng/utils/src/lib/overflow.directive.ts:36

Returns

OverflowDirective

Properties

overflowChange

readonly overflowChange: OutputEmitterRef<boolean>

Defined in: libs/ng/utils/src/lib/overflow.directive.ts:34

Emits when overflowing changes.

---

overflowing

readonly overflowing: Signal<boolean>

Defined in: libs/ng/utils/src/lib/overflow.directive.ts:32

true while the content is larger than the element.

Methods

check()

check(): void

Defined in: libs/ng/utils/src/lib/overflow.directive.ts:57

Measures again, e.g. after a font has loaded.

Returns

void