How to get line break within string interpolation in Angularjs

Here are two demonstrably working versions...

White Space

Solution One... if you want newlines to be respected in HTML... (works with the back-tick strings, or with 'My \ntitle'...

document.getElementById('example').innerHTML = `My
title`;
h1 {
  white-space: pre;
}
<h1 id="example">

</h1>

Angular Version:

<h1 style="white-space: pre;">{{title}}</h1>

HTML Break

Solution two... you want to use HTML...

document.getElementById('example').innerHTML = 'My<br />title';
<h1 id="example">

</h1>

Use ng-bind-html if you want to allow HTML during binding.


In html add style:

<div style="white-space: pre-line">{{DialogText}} </div>

Use '\n' to add newline in the typescript.

this.DialogText = "Hello" + '\n' + "World";

Same in stackblitz: https://stackblitz.com/edit/angular-rpoxr5linebreak