Split and Replace string in Angular 8 HTML

Question

I am receiving data from REST api. For name parameter, I want to split it at 2330 and give new line break. Example: I have name: ABCD 2330 This is My Name I want to give different style to the split strings and the output on my screen to be:

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

and not

ABCD 2330 This is My Name

Given the complexity of my object, I don't think I can put this operation in the ts file. I am binding the data like: <li>{{data.name}}</li> can I use some pipe like split and how would I add /n after the split and rejoin the string and also how can I give different style in the same

tag?

For every name parameter, you will get the value like that only? — Sivakumar Tadisetti
– Sivakumar Tadisetti, Commented Aug 12, 2020 at 12:52
you should look into writing a custom pipe for your template. Angular's documentation is great resource to do so. angular.io/guide/… — joshvito
– joshvito, Commented Aug 12, 2020 at 12:56
@joshvito can you tell me how would this work, I am fairly new to angular and I already tried going through the documentation but it was not a great help. If possible can you explain it in a better way as to how to approach the issue? — Bitly
– Bitly, Commented Aug 12, 2020 at 13:01
I tried the same thing but it is not showing anything in my case. It is working fine in stackblitz but not sure what is the issue on my screen — Bitly
– Bitly, Commented Aug 12, 2020 at 15:14

Sivakumar Tadisetti · Accepted Answer · 2020-08-12 14:30:48Z

2

Maybe you can try like below

Pipe

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

And in the template file

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

Working stackblitz

edited Aug 12, 2020 at 14:30

answered Aug 12, 2020 at 13:11

Sivakumar Tadisetti

5,0617 gold badges39 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Bitly Over a year ago

In this code, can you tell me how HTML would work? I mean I have ``` *ngFor = let data of receivedData> <li name="name">{{data.name}}</li> ```

Bitly Over a year ago

I tried giving innerHTML, how can I do that? It is giving errors

Bitly Over a year ago

I have created the pipe but I am not sure how this would work here

Bitly Over a year ago

name is a parameter inside the object named receivedData, how should I write HTML in this case?

Sivakumar Tadisetti Over a year ago

@Bitly updated the html and stackblitz, you can check now

Marian07 · Accepted Answer · 2022-12-29 18:33:23Z

1

For a simple use case it might not be necessary to add a pipe.

I've done the following

In .ts

myName;

// data received
handleData(data) {
  var originalName = data.name;
  this.myName = originalName.split("name")[0]
}

In the .html

{{myName}}

answered Dec 29, 2022 at 18:33

Marian07

2,6306 gold badges29 silver badges54 bronze badges

Comments

Minal Shah · Accepted Answer · 2020-08-12 13:12:12Z

0

Hey you just have to make custom pipe and use that pipe in your html to format the string as per your requirement.

To make the custom pipe use the following lines of code:

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

}

answered Aug 12, 2020 at 13:12

Minal Shah

1,4861 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

Split and Replace string in Angular 8 HTML

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related