✂️ Truncating Text in Angular with Custom Pipes

In modern Angular apps, it’s common to run into UI limitations—especially when you’re displaying long text inside components like cards, tables, or tooltips. To avoid layout breaks or overwhelming the user, truncating text is a practical and clean solution.

Instead of hacking around with string manipulation in templates, Angular gives us a cleaner approach: custom pipes.

In this guide, I’ll show you how to build two lightweight and powerful pipes to handle truncation by:

• Character count (TruncateCharactersPipe)
• Word count (TruncateWordsPipe)

---

🔡 Character-Based Truncation with TruncateCharactersPipe

This pipe trims a string down to a specific number of characters and appends a trailing symbol like …. It even supports truncating from the beginning if you pass a negative limit.

✅ Pipe Code

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncate',
  standalone: true,
})
export class TruncateCharactersPipe implements PipeTransform {
  transform(value: string, limit: number = 40, trail: string = '…'): string {
    if (!value) return '';

    if (limit < 0) {
      limit = Math.abs(limit);
      return value.length > limit
        ? trail + value.slice(value.length - limit)
        : value;
    }

    return value.length > limit
      ? value.slice(0, limit) + trail
      : value;
  }
}

💡 How It Works

• If the text is shorter than the limit → return it untouched.
• If the limit is positive → cut from the beginning and append a trail.
• If the limit is negative → keep the end of the string and prepend the trail.

🧪 Examples

<p>{{ 'This is a long text that needs truncation' | truncate:10 }}</p>
<!-- Output: This is a … -->

<p>{{ 'This is a long text that needs truncation' | truncate:-10 }}</p>
<!-- Output: …eds truncation -->

---

🧠 Word-Based Truncation with TruncateWordsPipe

Sometimes cutting characters mid-word hurts readability. This pipe ensures that only full words are displayed—either from the start or end—based on the limit.

✅ Pipe Code

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'truncateWords',
  standalone: true,
})
export class TruncateWordsPipe implements PipeTransform {
  transform(value: string, limit: number = 40, trail: string = '…'): string {
    if (!value) return '';

    const words = value.split(/\s+/);

    if (words.length <= Math.abs(limit)) {
      return value;
    }

    if (limit < 0) {
      return trail + words.slice(words.length + limit).join(' ');
    }

    return words.slice(0, limit).join(' ') + trail;
  }
}

💡 How It Works

• If the word count is within the limit → return the original string.
• If the limit is positive → keep the first N words, then append the trail.
• If the limit is negative → keep the last N words, and prepend the trail.

🧪 Examples

<p>{{ 'Angular provides powerful tools for frontend development' | truncateWords:3 }}</p>
<!-- Output: Angular provides powerful… -->

<p>{{ 'Angular provides powerful tools for frontend development' | truncateWords:-3 }}</p>
<!-- Output: …for frontend development -->

---

📌 When to Use Which?

• Use TruncateCharactersPipe when precision matters—like limiting characters in a button, tag, or tooltip.
• Use TruncateWordsPipe when readability is key—such as showing article previews, blog summaries, or notification titles.

---

🚀 Final Thoughts

Both of these pipes are small, reusable, and super helpful for keeping your Angular UI clean and readable. They encapsulate your logic, so your templates stay tidy—and your users stay happy.

Feel free to tweak the default trail (…) or add more logic depending on your app’s design.

Want to take it further? Combine these pipes with tooltips to show the full text on hover. 😉