API Reference

---

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

Class: MiddleTruncatePipe

Defined in: libs/ng/utils/src/lib/middle-truncate.pipe.ts:39

Splits a string so that its end survives truncation, e.g. a filename whose take number or extension tells it apart from its neighbours.

Render the head with text-overflow: ellipsis and let it shrink; keep the tail at full width. The ellipsis then lands in the middle without measuring text:

@let name = file.name | middleTruncate;
<span class="name" [title]="file.name">
  <span class="head">{{ name.head }}</span><span class="tail">{{ name.tail }}</span>
</span>

.name { display: flex; min-width: 0; }
.head { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tail { flex-shrink: 0; white-space: pre; }

The cut goes to a delimiter (_ - . space) within the last 16 characters, preferring the longest tail, so no token is cut in half. Without a delimiter the tail is 6 characters. Cuts never split a grapheme (emoji, combining accents, ZWJ sequences).

Implements

• PipeTransform

Constructors

Constructor

new MiddleTruncatePipe(): MiddleTruncatePipe

Returns

MiddleTruncatePipe

Methods

transform()

transform(value): MiddleTruncated

Defined in: libs/ng/utils/src/lib/middle-truncate.pipe.ts:40

Parameters

value

string | null | undefined

Returns

MiddleTruncated

Implementation of

PipeTransform.transform