CODEWITHSUNDEEP
javascriptangulartypescript
Tanzeel
Tanzeel

Reputation: 4998

How to cut short long strings while rendering using Typescript

I'm sorry for asking a very stupid question. It should be very easy but I'm not able to do this. I'm creating a minimal working model on stackblitz. So, I've a string array containing some information about me (say). I want to display them one by one using ngFor. But there will be some elements whose strings are very long.

For eg: The string is:

Apple, Ball, Cat, Dog, Elephant, Fish, Goat, Hen, Ink, Jackal, Kite

The displayed text should be:

Apple, Ball ...

That means after the second comma , or may be after certain characters, say 15 characters, it should be ... because the original text is occupying a large width.

I tried these methods:

  1. slice(start, end)
  2. substring(start, end)
  3. substr(start, length)

But these methods will permanently cut short the text. I don't want that. Hope I was able to explain the problem. Please correct me. Here's the stackblitz.

Upvotes: 1

Views: 1760

Answers (2)

Martin Parenteau
Martin Parenteau

Reputation: 73721

You can derive your own pipe EllipsisPipe from SlicePipe. In the code below, the derived pipe calls super.transform to apply slice:0:maxLength, and appends the ellipsis if the original string is longer than maxLength. Please note that super refers to the parent class SlicePipe.

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;    
  }
}

The pipe can then be used in the template:

{{ token | ellipsis:15 }}

See this stackblitz for a demo.

Update

If the items are displayed inside a PrimeNG Chips component, you can define a custom template and apply the EllipsePipe in the template:

<p-chips [(ngModel)]="values">
  <ng-template let-item pTemplate="item">
    {{item | ellipsis:15}}
  </ng-template>
</p-chips>

See this stackblitz for a demo.

Upvotes: 2

Kiran Mistry
Kiran Mistry

Reputation: 2725

Two way to truncate text into angular.

let str = 'How to truncate text in angular';

1. Solution

{{str | slice:0:6}}

Output:

how to

If you want to append any text after slice string like

 {{ (str.length>6)? (str | slice:0:6)+'..':(str) }}

Output:

how to...

2. Solution(Create custom pipe)

if you want to create custom truncate pipe

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

@Pipe({
 name: 'truncate'
})

export class TruncatePipe implements PipeTransform {

transform(value: string, args: string[]): string {
    const limit = args.length > 0 ? parseInt(args[0], 10) : 20;
    const trail = args.length > 1 ? args[1] : '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
   }
}

In Markup

{{ str | truncate:[20] }} // or 
{{ str | truncate:[20, '...'] }} // or

Don't forget to add a module entry.

@NgModule({
  declarations: [
    TruncatePipe
  ]
})
export class AppModule {}

Here is stackblitz You can check here

Different way using css

.b {
  white-space: nowrap; 
  width: 60px;  /* you can do with the help of width  */
  overflow: hidden;
  text-overflow: ellipsis; 
}
<div class="b">Hello world!</div>

Upvotes: 1

Related Questions