Adding line breaks when using interpolation

Question

I have some html for an alert message box. Using interpolation, I can re-use the same html to show multiple different alert messages. It looks like this: {{ myAlertMessage }}

Now I want to show a longer alert message containing line breaks. However, I cannot seem to modify the interpolated component property (which is a string) in any way which will introduce line breaks.

For example, using , or spacing the text across several lines in the component code (contained in either parentheses or back ticks), or the new line code (). None of these work to produce a line break in the text when the alert message is shown.

I would prefer not to have to add further property bindings just to cater for this particular use case.

Thanks in advance.

https://css-tricks.com/injecting-line-break/ ...this can be helpful — Anirudh Mangalvedhekar, Nov 22 '16 at 15:49
It would seem any html sequences are being escaped automatically, is there any way for you to turn that feature off? I'm not to familiar with typescript or angular so just a suggestion. — Mike, Nov 22 '16 at 15:50
Does adding a \n not work? "System Alert\nSomething has happened" — Lockless, Nov 22 '16 at 17:06

score 7 · Answer 1 · answered Nov 14 '17 at 16:25

7

Just use

<span [innerHTML]="myAlertMessage"></span>

the innerHTML property will interpret your html code.

answered Nov 14 '17 at 16:25

Alexandre N.

2,594
2
28
32

score 5 · Accepted Answer · answered Nov 24 '16 at 11:52

5

The solution, for Angular v2.1.1 at least, is to use [innerHTML]="myAlertMessage". It isn't necessary to use "bypassSecurityTrustHtml" for line breaks or lists to work.

answered Nov 24 '16 at 11:52

Brendan B

369
3
19

score 2 · Answer 3 · edited May 23 '17 at 12:25

2

You can use a pipe like

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

@Pipe({name: 'safe'})
export class SafeHtml {
  constructor(private sanitizer:Sanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustHtml(html);
  }
}

and use it like

<span [innerHTML]="myAlertMessage | safe"></span>

where myAlertMessage can contain   or 

See also In RC.1 some styles can't be added using binding syntax

edited May 23 '17 at 12:25

Community

1
1

answered Nov 22 '16 at 15:51

Günter Zöchbauer

623,577
216
2,003
1,567

It's not compatible with IE. Any other ideas? – Mieszczańczyk S. Dec 19 '18 at 16:01
That's not enough information. I'd suggest you create a new question with more details. – Günter Zöchbauer Dec 19 '18 at 16:04

score 0 · Answer 4 · edited Jul 22 '20 at 23:52

0

Try to use \n in your myAlertMessage text. Something like that: "\n Some alert text \n Newline of the alert text";

And use a <pre> html tag in your component HTML file like that:

<div>
  <p><pre>{{ myAlertMessage }}</pre></p>
</div>

edited Jul 22 '20 at 23:52

Worthwelle

1,244
1
16
19

answered Jul 22 '20 at 18:01

OlegGuy

41
7

Adding line breaks when using interpolation

4 Answers4

Linked