Need to save yourself some digital real estate in your Angular UI? If so, the you'll be glad you landed here.

I'll show you how to truncate text with the aid of an Angular custom pipe.

And it's a lot easier than you think.

The Problem

Yes, you can truncate text with a built-in pipe. You don't have to use a custom pipe.

Take a look at this code.

{{stringToTruncate | slice:0:10}}

If you throw that in your template, you'll truncate the string identified by stringToTruncate

Specifically, it will start at the first letter of the string (character 0) and stop at the 10th character. That's specified with 0:10 part after the slice pipe.

But that might not be good enough. Let's say you want to add ellipsis after the string to let the user know that the output is abbreviated. 

Also, you might want to check to make sure it isn't too short for abbreviation.

In that case, you'd end up with code that looks something like this:

{{ (stringToTruncate.length>10)? (stringToTruncate | slice:0:10)+'...':(stringToTruncate) }}

And that works. But it's fugly.

I think it's best to let a custom pipe handle that logic so you can keep your template code nice and neat.

So let's get started with that.

Custom Piping

Create a new file in your source tree called transform.pipe.ts. Fill it with code that looks like this:

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {

  transform(text: string, length: number = 20, suffix: string = '...'): string {

    if (text.length > length) {
      let truncated: string = text.substring(0, length).trim() + suffix;
      return truncated;
    }

    return text;
  }
}

What you're looking at above is pretty much the template for any custom pipe. So it's a handy bit of code to have hanging around.

The @Pipe decorator identifies the name of the pipe that you'll use in the template. Here's it's named "truncate."

Cuz that's what this pipe does. It truncates.

The class itself implements PipeTransform. That's because all pipes implement PipeTransform.

The transform() method does all the heavy lifting. It's also the method you need to implement when you use the PipeTransform interface.

That method, by the way, accepts three (3) parameters: the string to be truncated, the length at which the truncation happens, and the suffix to include after the truncation.

The last two parameters have default values. The default length is 20 characters and the default suffix is an ellipsis.

However, those values can be overridden within the template. I'll show you how to do that in a moment.

The if statement checks to see if the text is longer than the specified truncation length. If so, then the code follows the truncation logic.

It does that by creating a new string called truncated. It consists of the original string abbreviated to the number of characters specified by length. That string also gets concatenated with the suffix.

Let's say you keep all the defaults and run that method with this string: "Now it's the time for all great men to party."

In that case, you'll end up with "Now it's the time fo...". That's because the method limits the string length to 20 characters and adds the ellipsis (...) suffix.

By the way: you need that trim() in the abbreviation code so that the code doesn't put an ellipsis after a space. 

Using It

Thus far, all you've done is create a custom pipe. You haven't used it yet.

Let's change that.

To use the pipe, you'll need to import it into the module where you want to use it. That code will appear at the top of the module and look something like this:

import { TruncatePipe } from '../../pipes/truncate.pipe';

I say it will look something like that because I don't know exactly where you put your pipe. You'll need to specify the exact location.

But you also need to declare the pipe within the module. Do that in the declarations array:

@NgModule({
  declarations: [
    TruncatePipe,
    ...
  ],
  exports: [
  ...
  ],
  imports: [
  ...
  ]
})

Then you can use the pipe in any templates associated with that module.

Template Usage

Now let's take a look at how to use it in a template.

<div class="card-header">{{account.name | truncate}}</div>

That'll do it.

Remember: the pipe is identified by the name "truncate" according to the @Pipe decorator in the code. So that line will abbreviate the account name if it's greater than 20 characters.

And that brings up a good point: the above code uses all the defaults. It will truncate the code at 20 characters and append an ellipsis to it.

If you'd like to customize the truncation length, go with something like this:

<div class="card-header">{{account.name | truncate:5}}</div>

That :5 represents the second parameter in the transform() method you saw above. Since the second parameter is the truncation length, the account name will now get truncated at 5 characters instead of 20.

Another pro-tip: when using pipes in templates, you separate the transform() parameters with colons.

For example, if you wanted to truncate the string at 10 characters and use "&c." as the suffix instead of an ellipsis, you'd go with this:

<div class="card-header">{{account.name | truncate:10:'&c.'}}</div>

Wrapping It Up

That's a fairly useful custom pipe you've just created. You can use it to save screen space on mobile UIs.

But I'm sure you'll need to tweak the code you see above to suit your own requirements. Feel free to get started with that at your earliest convenience.

Have fun!

Photo by Luis Quintero from Pexels