CODEWITHSUNDEEP
javascriptangulartypescript
static
static

Reputation: 327

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

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

Upvotes: 1

Views: 496

Answers (6)

Hillel Buchsbaum
Hillel Buchsbaum

Reputation: 86

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>

Upvotes: 2

static
static

Reputation: 327

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

Upvotes: 0

Jiri Kralovec
Jiri Kralovec

Reputation: 1627

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) + '...'
    }
  });
}

Upvotes: 2

shubham tambere
shubham tambere

Reputation: 92

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..."

Upvotes: 0

Vinay
Vinay

Reputation: 2339

You can use bootstrap 4 class text-truncate

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

Upvotes: 3

codingwithmanny
codingwithmanny

Reputation: 1184

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>

Upvotes: 1

Related Questions