Comment tronquer du texte en Angular2 ?

Question

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

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

Answer 1

Deux façons de tronquer du texte en angular.

let str = 'Comment tronquer du texte en angular';

1. Solution

  {{str | slice:0:6}}

Résultat :

   comment

Si vous voulez ajouter du texte après la chaîne tronquée

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

Résultat :

 comment...

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

Si vous voulez créer un pipe de troncature 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 Markup

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

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

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

Answer 2

Tronquer Pipe avec des paramètres optionnels :

• limit - longueur maximale de la chaîne
• completeWords - Drapeau pour tronquer au mot complet le plus proche, au lieu du caractère
• ellipsis - 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 {}

Utilisation

Exemple de chaîne :

public longStr = 'Une très longue chaîne qui doit être tronquée';

Marquage :

  {{longStr | truncate }} 

  {{longStr | truncate : 12 }} 

  {{longStr | truncate : 12 : true }} 

  {{longStr | truncate : 12 : false : '***' }}

Answer 3

Vous pouvez tronquer le texte en fonction du CSS. Cela permet de tronquer un texte en fonction de la largeur et non du nombre de caractères fixes.

Exemple

CSS

.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

HTML

    Lorem Ipsum est simplement un texte fictif de l'industrie de l'impression et de la composition. Lorem Ipsum a été le texte fictif standard de l'industrie depuis les années 1500, lorsque un imprimeur inconnu a pris une galée de caractères et l'a mélangée pour en faire un livre spécimen. Il a survécu non seulement à cinq siècles, mais aussi au passage à la composition électronique, restant essentiellement inchangé. Il a été popularisé dans les années 1960 avec la sortie de feuilles Letraset contenant des passages de Lorem Ipsum, et plus récemment avec des logiciels de PAO comme Aldus PageMaker incluant des versions de Lorem Ipsum.

Note : ce code est utile pour une seule ligne et pas pour plusieurs.

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

Answer 4

J'ai utilisé ce module ng2 tronquer, c'est assez facile, importer le module et vous êtes prêt à partir... dans {{ data.title | truncate : 20 }}

Answer 5

Si vous souhaitez tronquer par un 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…"

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

Si vous souhaitez tronquer par un nombre de lettres mais ne pas couper 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…"