4

I'm new to Angular. I want to cut short strings that are longer than 15 characters (say) and then add ... at the end.

For eg:

Name: Tanzeel,

Role: Intern

Address: Bangal...,

Likes: C, CPP, ...,

I'm using p-chips from PrimeNg to display some tags. I'm not getting any error. Actually I'm not getting anything, my web page is just blank. Even the console log is also clean. Here's my code:

<p-chips [(ngModel)]="tokens">
  <ng-template let-item pTemplate="item">
    {{item | slice:0:15+'...'}}
  </ng-template>
</p-chips>

And here's the stackblitz for the same. The code works when I remove +... but then there was no ... concatenation seen (obviously). Please point of my mistake. However, In a separate branch, I created my own custom pipe for the same from this question:

How to cut short long strings while rendering using Typescript

And here's the code.

EllipsisPipe.component.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

And It is working perfectly. You can see the stackblitz for this also. But when I showed this to my Tech lead, She called me an idiot for re-inventing the wheel. :-( She told me to use slice or anything which is provided by Angular itself. Please correct my mistake. (Please pardon me If I'm really asking a stupid question).

P.S: I got some help from this - How to truncate text in Angular2?

Community
  • 1
  • 1
Tanzeel
  • 4,174
  • 13
  • 57
  • 110
  • 1
    The code for `EllipsisPipe` comes from [this answer](https://stackoverflow.com/a/60993632/1009922) (it should be mentioned in the question but antoher reference is given instead). You could tell your tech lead that this solution is actually using `SlicePipe`. I would say that I am not impressed by her comment... – ConnorsFan Apr 05 '20 at 14:27
  • Yes right. I thought I've already pasted the code so reference isn't required. Thanks for correcting me, So I've added the link for that too. :-) – Tanzeel Apr 05 '20 at 16:35

2 Answers2

8

From Angular documentation: it does not provide an option to add ellipsis at the end of string. So if you want to add ellipsis, I think your custom pipe is the only solution. In our project we also use custom pipe similar to yours.

And for why your attempt does not work:

{{item | slice:0:15+'...'}}

It is not working because you're passing invalid parameter.

https://angular.io/api/common/SlicePipe - you can see here it only accepts numbers, but you're passing 15... (string).

A simple solution (using only Angular's slice pipe) would be:

{{ item | slice:0:15 }}...

Or:

{{ (item | slice:0:15) + '...' }}

But this is hardcoded so I suggest to use your custom pipe instead.

Gynteniuxas
  • 7,035
  • 18
  • 38
  • 54
  • 1
    This worked. Let me quickly run unit test cases. Give me 2 mins please. – Tanzeel Apr 05 '20 at 10:37
  • 1
    Ya, this solution is perfect and you've also explained it very well. I'll stick to `{{ (item | slice:0:15) + '...' }}` for sometime. Then let's see what my code reviewer has to say. – Tanzeel Apr 05 '20 at 10:39
  • 1
    Good luck :) and in case Tech Lead find something better, let me know as well. ;) As for now, I think your approach/solution is probably the best. – Gynteniuxas Apr 05 '20 at 10:41
2

I had a similar problem and dont want to add a custom pipe to my project. the topic is over 1 year old, but maybe it helps other people with the same problem. My solution to this was the classic if/else. Works pretty good.

{{(project?.description.length>200) ? (project?.description | slice:0:200)+'...' : (project?.description)}}
Dizzy
  • 43
  • 6