Comment tronquer du texte dans Angular2?

Existe-t-il un moyen de limiter la longueur de la chaîne à un nombre de caractères? par exemple: je dois limiter la longueur d'un titre à 20 {{ data.title }}.

Y a-t-il un tuyau ou un filtre pour limiter la longueur?

Deux façons de tronquer le texte en angulaire.

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

1. Solution

  {{str | slice:0:6}}

Production:

   how to

Si vous souhaitez ajouter du texte après la chaîne de tranche comme

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

Production:

 how to...

2. Solution (Créer un tube personnalisé)

si vous souhaitez créer un tube tronqué personnalisé

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

Dans le balisage

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

N'oubliez pas d'ajouter une entrée de module.

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

Tronquer le tuyau avec des paramètres facultatifs :

• limit - longueur maximale de la chaîne
• completeWords - Indicateur pour tronquer au mot complet le plus proche, au lieu du caractère
• points de suspension - suffixe de fin ajouté

-

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

N'oubliez pas d'ajouter une entrée de module.

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

Usage

Exemple de chaîne:

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

Balisage:

  <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*** -->

Vous pouvez tronquer du texte basé sur CSS. Il permet de tronquer un texte basé sur la largeur et non le caractère fixe.

Exemple

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>

Remarque: ce code utilise plein pour une ligne pas pour plus d'une.

La solution de Ketan est la meilleure si vous voulez le faire par Angular

J'ai utilisé ce module ng2 truncate , son module d'importation assez simple et vous êtes prêt à partir ... dans {{data.title | tronquer: 20}}

Voici une approche alternative utilisant un interfacepour décrire la forme d'un objet d'options à passer via le pipedans le balisage.

@Pipe({
  name: 'textContentTruncate'
})
export class TextContentTruncatePipe implements PipeTransform {

  transform(textContent: string, options: TextTruncateOptions): string {
    if (textContent.length >= options.sliceEnd) {
      let truncatedText = textContent.slice(options.sliceStart, options.sliceEnd);
      if (options.prepend) { truncatedText = `${options.prepend}${truncatedText}`; }
      if (options.append) { truncatedText = `${truncatedText}${options.append}`; }
      return truncatedText;
    }
    return textContent;
  }

}

interface TextTruncateOptions {
  sliceStart: number;
  sliceEnd: number;
  prepend?: string;
  append?: string;
}

Puis dans votre balisage:

{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}

Très simple à l' aide de tuyaux tranche (de la pipe angulaire de base), comme vous avez demandé data.title:

{{ data.title | slice:0:20 }}

À partir de la documentation commune Angular https://angular.io/api/common/SlicePipe

Si vous souhaitez tronquer par un certain nombre de mots et ajouter des points de suspension, vous pouvez utiliser cette fonction:

truncate(value: string, limit: number = 40, trail: String = '…'): string {
  let result = value || '';

  if (value) {
    const words = value.split(/\s+/);
    if (words.length > Math.abs(limit)) {
      if (limit < 0) {
        limit *= -1;
        result = trail + words.slice(words.length - limit, words.length).join(' ');
      } else {
        result = words.slice(0, limit).join(' ') + trail;
      }
    }
  }

  return result;
}

Exemple:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 5, '…')
> "Bacon ipsum dolor amet sirloin…"

extrait de: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Si vous voulez tronquer par un certain nombre de lettres mais ne coupez pas les mots, utilisez ceci:

truncate(value: string, limit = 25, completeWords = true, ellipsis = '…') {
  let lastindex = limit;
  if (completeWords) {
    lastindex = value.substr(0, limit).lastIndexOf(' ');
  }
  return `${value.substr(0, limit)}${ellipsis}`;
}

Exemple:

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, true, '…')
> "Bacon ipsum dolor…"

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, false, '…')
> "Bacon ipsum dolor a…"

Je viens d'essayer la réponse @Timothy Perez et j'ai ajouté une ligne

if (value.length < limit)
   return `${value.substr(0, limit)}`;

à

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {

   if (value.length < limit)
   return `${value.substr(0, limit)}`;

   if (completeWords) {
     limit = value.substr(0, limit).lastIndexOf(' ');
   }
   return `${value.substr(0, limit)}${ellipsis}`;
}
}

Essayez celui-ci, si vous souhaitez tronquer en fonction de mots au lieu de caractères tout en permettant également à une option de voir le texte complet.

Je suis venu ici à la recherche d'une solution Read More basée sur des mots , partageant la coutume que Pipej'ai fini par écrire.

Tuyau:

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

@Pipe({
  name: 'readMore'
})
export class ReadMorePipe implements PipeTransform {

  transform(text: any, length: number = 20, showAll: boolean = false, suffix: string = '...'): any {

    if (showAll) {
      return text;
    }

    if ( text.split(" ").length > length ) {

      return text.split(" ").splice(0, length).join(" ") + suffix;
    }

    return text;
  }

}

Dans le modèle:

<p [innerHTML]="description | readMore:30:showAll"></p>
<button (click)="triggerReadMore()" *ngIf="!showAll">Read More<button>

Composant:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Dans le module:

import { ReadMorePipe } from '../_helpers/read-more.pipe';

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}