Text
truncateMiddle
Length is a grapheme budget including the suffix (default ellipsis).
Use it in your component
Standalone component
import { Component } from '@angular/core';
import { TruncateMiddlePipe } from 'extra-pipe';
@Component({
standalone: true,
imports: [TruncateMiddlePipe],
template: `{{ 'long-report-final.pdf' | truncateMiddle: 14 }}`,
})
export class ExampleComponent {
}
Template
{{ 'long-report-final.pdf' | truncateMiddle: 14 }}
Try it live.
The output below runs the packed library. Edit data, not code.
Use double quotes for text, or a number, array, object or null.
Ordered parameters: maximumLength, suffix. Locale is controlled separately.
This pipe has no locale override.
Live template data
readonly value = "👨👩👧👦-long-report-final.pdf";
readonly parameter0 = 14;
readonly parameter1 = "…";
{{ value | truncateMiddle: parameter0: parameter1 }}
Rendered output
👨👩👧👦-long-…al.pdf