GdEllipsisDetectorDirective

The GdEllipsisDetectorDirective is a versatile Angular directive that detects when text content is truncated with an ellipsis (...). It's particularly helpful for managing long text or lists of items in limited space, providing visual cues or additional functionality when content is cut off.

What it does

• Detects text truncation in real-time
• Responds to content changes and element resizing
• Provides isTruncated and truncatedCount signals for easy template binding
• Supports both single string and array of strings as input
• Calculates the number of truncated items for arrays
• Uses efficient debouncing for performance optimization

API

• Input - gdEllipsisDetector: string | Array<string> | void | undefined The text content or array of strings to monitor for truncation.

• Input - truncatedCountEnabled: boolean Enable the calculation of truncated items count for arrays.

• Input - baseTagWidth: number Base width for a single-digit tag for truncated count.

• Input - additionalDigitWidth: number Additional width per digit for truncated count.

• isTruncated: Signal<boolean> A signal indicating whether the content is currently truncated.

• truncatedCount: Signal<number> A signal indicating the number of truncated items (for arrays).

How to use it

Using the GdEllipsisDetectorDirective directive is straightforward. Here's how you can add it to your Angular template:

1. First, import the directive:

import { GdEllipsisDetectorDirective } from '@geodome/gdk/common';

2. Then, add it to the element you want to check for ellipsis:

<span [gdEllipsisDetector]="someText"> {% raw %}{{ someText }}{% endraw %} </span>

3. Access the truncation status using a template reference:

<span
  [gdEllipsisDetector]="someText"
  #ellipsisDetector="gdEllipsisDetector"
  pTooltip="{% raw %}{{ ellipsisDetector.isTruncated() ? someText : undefined }}{% endraw %}"
>
  {% raw %}{{ someText }}{% endraw %}
</span>

When to Use

The GdEllipsisDetectorDirective is great for:

• Displaying "Read More" buttons only when text is truncated
• Showing tooltips with full text for truncated elements
• Indicating the number of hidden items in a truncated list
• Any situation where you need to know if content is being cut off

Advanced Example

Here's an example demonstrating the use of GdEllipsisDetectorDirective with an array of strings and a truncated count indicator:

<span
  #cellTextListEllipsisDetector="gdEllipsisDetector"
  truncatedCountEnabled
  [gdEllipsisDetector]="cellTextList"
  [baseTagWidth]="22"
  [additionalDigitWidth]="7"
  pTooltip="{{ cellTextListEllipsisDetector.isTruncated() ? cellTextListString : undefined }}"
>
  {{ cellTextListString }}
</span>
@if (cellTextListEllipsisDetector.isTruncated()) {
  <gd-label-status
    label="+{{ cellTextListEllipsisDetector.truncatedCount() }}"
    [pTooltip]="cellTextListString"
  >
  </gd-label-status>
}

In this example:

• The directive is applied to a list of text items (cellTextList).
• truncatedCountEnabled is set to calculate the number of truncated items.
• baseTagWidth and additionalDigitWidth are used to fine-tune the truncation calculation.
• A tooltip shows the full content when truncated.
• If truncated, a label displays the count of hidden items with its own tooltip.

By using GdEllipsisDetectorDirective, you can create more responsive and user-friendly interfaces in your Angular application, especially when dealing with dynamic content that may exceed available space.