I want to truncate a text from one of the elements of my array

Question

I have a table news:

export class News{
  id: string;
  name: string;
  text: string;
  admin: boolean;
  users: Users;
 }

I have a method which returns the list of news.ts:

news: News[];
pageNews: News[];

getNews(): void {   
//let MaxLength = 5;
this.newsService.getnews().subscribe(res => {
    this.news= res;
    this.pageNews= this.news.slice(0, 10);
 }
);}

in news.html:

<table class="table table-bordered table-striped" style="border: none;">
    <thead>
        <tr>
            <td class="title-column">Id</td>
            <td class="title-column">Name</td>
            <td class="title-column">Text</td>
        </tr>
    </thead>
       <tr *ngFor="let u of pageNews">
            <td class="row-mid">{{u.id}}</td>
            <td class="row-mid">{{u.name}}</td>
            <td class="row-mid">{{u.text}}</td>
       </tr>                  
</table>

but when the name or text are too long, my table overflows, so, I would like to truncate my name and my text when it exceeds 20 characters and put points afterwards. Example:

string s = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
result = 'aaaaaaaa...'

I try in my news.ts but it does'nt work

news: News[];
pageNews: News[];

getNews(): void {   
//let MaxLength = 5;
this.newsService.getnews().subscribe(res => {
    this.news= res.filter(e=>{e.name= e.name.substring(0,20) + '...',
    e.text= e.text.substring(0,20) + '...';});
    this.pageNews= this.news.slice(0, 10);
 }
);}

Does this answer your question? [Smart way to truncate long strings](https://stackoverflow.com/questions/1199352/smart-way-to-truncate-long-strings) — Heretic Monkey, Jul 01 '20 at 12:22

score 3 · Answer 1 · answered Jul 01 '20 at 12:24

3

You can use bootstrap 4 class text-truncate

<span class="d-inline-block text-truncate" style="max-width: 150px;">
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
</span>

answered Jul 01 '20 at 12:24

Vinay

2,272
4
19
34

Jiri Kralovec · Answer 2 · 2020-07-01T12:26:03.883

2

I think the better way to go would be using CSS to "cut" the content. Set max-width on the columns and correct text overflow values:

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

You will keep your data and get a nice, dynamic truncation.

Edit

If you still want to edit your data, I recommend using substr in your subscription like so:

this.newsService.getnews().subscribe(res => {
  this.news= res;
  this.pageNews = this.news.slice(0, 10).map((post) => {
    return {
      ...post,
      name: post.name.substring(0, 10) + '...'
    }
  });
}

edited Jul 01 '20 at 12:26

answered Jul 01 '20 at 12:18

Jiri Kralovec

1,487
1
10
18

I would like to modify the text or name coming from my comic strip through my .ts file – static Jul 01 '20 at 12:23
Thank you very much, suppose I want to modify an element of my array, my form, will take the name or the text with '...' instead of the original value – static Jul 01 '20 at 13:49

Hillel Buchsbaum · Answer 3 · 2020-07-02T19:16:26.090

2

I suggest using a angular pipe: https://angular.io/guide/pipes

the code may look some thing like this:

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

@Pipe({name: 'StringTrunctuater'})
export class StringTrunctuaterPipe implements PipeTransform {
  transform(value: string): string {
    return value.slice(0,20)+"...";
  }
}

and use like so:

<td class="row-mid">{{u.text| StringTrunctuater}}</td>

edited Jul 02 '20 at 19:16

answered Jul 01 '20 at 12:26

Hillel Buchsbaum

86
5

1

May be a good idea to add an optional length and offset parameters, by far the best (and most dynamic) answer – Jiri Kralovec Jul 01 '20 at 12:44
how we use it overall, it's a new class that we have to create? – static Jul 01 '20 at 13:22
@CedricTegue see the link to angular docs I embedded. A pipe is kinda like a helper function, they can be really useful. But in short, you need to create a new pipe in the cli "ng g pipe". – Hillel Buchsbaum Jul 01 '20 at 18:15
thank you, but your method transform() is not correct?! – static Jul 02 '20 at 09:20
indeed. edited and fixed. [Here](https://stackblitz.com/edit/angular-playground-piqqkz?file=app%2Fstring-trunctuater.pipe.ts) is the example running. – Hillel Buchsbaum Jul 02 '20 at 19:24

score 1 · Answer 4 · answered Jul 01 '20 at 12:18

1

One possible way is to just use css with.

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100px;
}

<p>Here is my really long text that I do not want to show</p>

answered Jul 01 '20 at 12:18

codingwithmanny

1,126
8
20

I would like to modify the text or name coming from my comic strip through my .ts file – static Jul 01 '20 at 12:22

score 0 · Answer 5 · answered Jul 01 '20 at 12:24

You can slice the string if the length is exceeding your threshold String slicing

You can append the dots by string concatenation

Example:

var str = "Hello world!"; 
var res = str.slice(0, 5);
res = res + "...";
console.log(res); <<< prints ""Hello..."

score 0 · Accepted Answer · answered Jul 02 '20 at 09:38

0

transform(source: string, size: number): string {
   return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

answered Jul 02 '20 at 09:38

static

197
1
3
13

I want to truncate a text from one of the elements of my array

6 Answers6