Fractionner et remplacer une chaîne de caractères dans Angular 8 HTML

Question

Je reçois des données de l'api REST. Pour le paramètre nom, je veux le diviser à 2330 et donner un nouveau saut de ligne. Exemple : J'ai un nom : ABCD 2330 This is My Name Je veux donner un style différent aux chaînes de caractères fractionnées et la sortie sur mon écran doit être la suivante :

ABCD 2330
This is My Name // this will be bold

et non

ABCD 2330 This is My Name

Vu la complexité de mon objet, je ne pense pas pouvoir mettre cette opération dans le fichier ts. Je lie les données comme : <li>{{data.name}}</li> puis-je utiliser un pipe comme split et comment ajouter /n après le split et rejoindre la chaîne de caractères et aussi comment donner un style différent dans la même

• tag ?

Answer 1

Peut-être pouvez-vous essayer comme ci-dessous

Tuyau

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

@Pipe({name: 'texttransform'})
export class TextTransformPipe implements PipeTransform {
  transform(value: string): string {
    const splitBy = '2330'
    const splittedText = value.split( splitBy );
    return `${ splittedText[0] } ${ splitBy } <br> <b>${ splittedText[1] }</b>`;
  }
}

Et dans le fichier modèle

<ul>
  <li *ngFor="let data of receivedData" [innerHTML]="data.name | texttransform"></li>
</ul>

Travail stackblitz

Answer 2

Il vous suffit de créer un pipe personnalisé et de l'utiliser dans votre html pour formater la chaîne de caractères selon vos besoins.

Pour réaliser le tuyau personnalisé, utilisez les lignes de code suivantes :

@Pipe({ name: 'myPipe' })
export class MyPipe implements PipeTransform {

    transform(value: any) {
        if (value) {
           let firstLine= value.substr(0,9);
           let secondLine= value.substr(9).bold();

            return firstLine+'/n'+secondLine
        }
        return value;
    }

}