String containing
doesn't break line with ngFor

Question

I iterate through an array with ngFor. The array contains strings like this: "Some Text 1 <br> some text 2". Here is the HTML:

<div class="content" *ngFor="let item of graphService.contents">{{item}}</div>

It prints the correct text but doesn't break the line. It prints the br like a normal word but I want it to break the line. How can I achieve that without splitting the string in two like "Array.firstString + <br> + Array.secondString?

If your item contains html then you have to use https://angular.io/api/platform-browser/DomSanitizer — Michael, Aug 19 '19 at 11:59

score 1 · Accepted Answer · answered Aug 19 '19 at 12:01

1

To prevent escaping HTML u can do :

    <div class="content" 
         *ngFor="let item of graphService.contents"
         [innerHTML]="item"></div>

answered Aug 19 '19 at 12:01

lovis91

1,988
2
14
24

Prashanth Damam · Answer 2 · 2019-08-19T12:34:32.940

0

You can use this

<div class="content" *ngFor="let item of graphService.contents">
    <div [innerHTML]="item"></div>
</div>

If you want to render a plain text from rich text then you can add this function.

this.utilService.htmlToPlaintext(content);

Define a function htmlToPlaintext() like this in your service.

htmlToPlaintext(text) {
    var plain = text ? String(text).replace(/\\t/g, '') : '';
    return text ? String(plain).replace(/\\n/g, '') : '';
  }

edited Aug 19 '19 at 12:34

answered Aug 19 '19 at 12:07

Prashanth Damam

841
8
25

"Parser Error: Got interpolation ({{}}) where expression was expected" is the error i get when i try to do it with [innerHTML] – MMF Aug 19 '19 at 12:15
then you can once refer to this https://stackoverflow.com/questions/40203279/parser-error-got-interpolation-where-expression-was-expected – Prashanth Damam Aug 19 '19 at 12:25
Try once by giving [innerHTML]="item" – Prashanth Damam Aug 19 '19 at 12:29
1

Your answer didn't solve my prolem but the error it threw got me on the right track. – MMF Aug 19 '19 at 12:31
Yeah by mistake i binded the value item in double braces. That was the problem. Thanks – Prashanth Damam Aug 19 '19 at 12:34

String containing doesn't break line with ngFor

2 Answers2

String containing
doesn't break line with ngFor