How to get line break within string interpolation in Angularjs

Question

So I'm trying to do something very simple and I'm stuck. I have a String variable and within that variable I Wanna set line break so certain part of the text goes to new line.

What I have tried:

title: string = "My \n Title";
title: string = "My\ Title";
title: string = "My\
Title";
title: string = "My" + "\n" + "Title";

I have tried many variations but its just not working. Am I being stupid and missing something very obvious?

Not a duplicate as I have tried the <br/> and it has not worked.

Update:

The variable is being printed in the browser HTML like so {{title}}

Answer 1

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.

Answer 2

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