How to truncate text in Angular2? How to truncate text in Angular2? angular angular

How to truncate text in Angular2?


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: any[]): 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 {}


Truncate Pipe with optional params:

  • limit - string max length
  • completeWords - Flag to truncate at the nearest complete word, instead of character
  • ellipsis - appended trailing suffix

-

import { Pipe, PipeTransform } from '@angular/core';@Pipe({  name: 'truncate'})export class TruncatePipe implements PipeTransform {  transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {    if (completeWords) {      limit = value.substr(0, limit).lastIndexOf(' ');    }    return value.length > limit ? value.substr(0, limit) + ellipsis : value;  }}

Don't forget to add a module entry.

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

Usage

Example String:

public longStr = 'A really long string that needs to be truncated';

Markup:

  <h1>{{longStr | truncate }}</h1>   <!-- Outputs: A really long string that... -->  <h1>{{longStr | truncate : 12 }}</h1>   <!-- Outputs: A really lon... -->  <h1>{{longStr | truncate : 12 : true }}</h1>   <!-- Outputs: A really... -->  <h1>{{longStr | truncate : 12 : false : '***' }}</h1>   <!-- Outputs: A really lon*** -->


You can truncate text based on CSS. It helps to truncate a text based on width not fix character.

Example

CSS

.truncate {            white-space: nowrap;            overflow: hidden;            text-overflow: ellipsis;        }.content {            width:100%;            white-space: nowrap;            overflow: hidden;            text-overflow: ellipsis;        }

HTML

<div class="content">    <span class="truncate">Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></div>

Note: this code use full for one line not for more than one.

Ketan's Solution is best if you want to do it by Angular