Angular Truncate Text / Show More (3+ Options)

Here are some options for showing/hiding your long text in AngularJs using directives/filters (and/some in modules). I’ve included screenshots and pros/cons for each so you can determine quickly which ones you might use for your next project.

1. Angular Text Truncate Module

Angular Text Truncate Module
Angular Text Truncate Module

This one fulfills the requirement of having show/hide for more text. Pretty well coded.
Pros:
– Has option to show/hide more text.
– Option for truncate character length or number of words.
– Custom appended text (ie – read more…).

Cons:
– When value of variable in scope changes its not reflected on page. (Update: I managed to tweak the code to get it working).
https://github.com/lorenooliveira/ng-text-truncate/issues/3

Github Demo 1 Demo 2

2. Angular Truncate Filter

Angular Truncate Filter
Angular Truncate Filter

Pros:
– Good options to not break words, specify number of characters or words.

Cons:
– No option to show/hide more text.
– No option for custom appended text (ie – read more…).

Github Demo

3. Angular Ellipsis Module

Angular Ellipsis Module
Angular Ellipsis Module

Pros:
– Pretty good module as it uses max-height with window resize handlers to determine length of text.
– Has option for custom appended text (ie – read more…).

Cons:
– No option to show/hide more text.
– though and the window resize events add unnecessary overhead in my opinion.

Github Demo

Sam Deering

Sam Deering

Sam is a web developer, online entrepreneur and investor. In his spare time he enjoys coding, playing chess and sharing what he learns with others.

One thought on “Angular Truncate Text / Show More (3+ Options)

Leave a Reply

Your email address will not be published. Required fields are marked *