24

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

mhodges
  • 10,938
  • 2
  • 28
  • 46
Skywalker
  • 4,984
  • 16
  • 57
  • 122
  • 1
    Possible duplicate of [New Line '\n' is not working in Typescript](https://stackoverflow.com/questions/44743813/new-line-n-is-not-working-in-typescript) – Luca Kiebel Dec 06 '17 at 15:43
  • 1
    @LucaKiebel not a duplicate as I have tried the solution in that question and it has not worked. – Skywalker Dec 06 '17 at 15:47
  • @Skywalker what exactly do you expect the newline to **do**? The `\n` escape definitely includes a newline character in a string. Depending on how the string is actually used, that may or may not be detectable. – Pointy Dec 06 '17 at 15:48
  • 2
    Where exactly do you want to print it ? It matters: console.log or browser HTML render behaves differently. – Mosè Raguzzini Dec 06 '17 at 15:52
  • @MosèRaguzzini its browser HTML. – Skywalker Dec 06 '17 at 15:53
  • @Pointy I wanna move everything after the `\n` onto a new line. Its being used the browser HTML. In my case some move `Title` underneath `My`. – Skywalker Dec 06 '17 at 15:55
  • @Skywalker `{{title}}` is not HTML, it is *text* within HTML. Any HTML inside angularjs interpolation does not get treated as HTML (for security reasons). If you want html, use the `ng-bind-html` attribute. You will have to include the safe html service and inject that into your controller, but that is simple and the documentation is thorough. – mhodges Dec 06 '17 at 15:57
  • @Skywalker Also, this issue has nothing to do with TypeScript, I will update the question title accordingly – mhodges Dec 06 '17 at 15:58
  • You should provide a working snippet beacause in html line break IS
    . May be you embed your
    as string and not as JSX ?     – Mosè Raguzzini Dec 06 '17 at 15:58
  • I'm missing a `var`, `let`or `const` at the beginning of your declaration. – rweisse Dec 06 '17 at 16:00
  • And you shouldn't use double quotes with typescript. You should use single quotes or backquotes – rweisse Dec 06 '17 at 16:01
  • 2
    @rweisse That's a linting preference, not a standard. – mhodges Dec 06 '17 at 16:02
  • @rweisse That is not true at all. – James Monger Dec 06 '17 at 16:04
  • Yeah, you are right. It's a linting preference. @james-monger what's not true at all? – rweisse Dec 06 '17 at 16:06
  • @rweisse Saying that one "shouldn't use double quotes" and "should use single quotes" - that's not true. There's no "should" about it - the [TypeScript source code](https://github.com/Microsoft/TypeScript) uses **double quotes**! – James Monger Dec 06 '17 at 16:07
  • Where is your code? – Aluan Haddad Dec 06 '17 at 22:56
  • @JamesMonger You are right, there is absolutely no reason, nor obligation not to use double quotes, in typescript. – Vladimir Despotovic Mar 26 '21 at 22:38

5 Answers5

41

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.

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • 1
    Close, but OP is using angularjs. Just make it `

    {{title}}

    ` and this is a working solution for the OP     – mhodges Dec 06 '17 at 16:01
  • Hi @mhodges I wanted to create a short working example... but I'll add a note about that. – Fenton Dec 06 '17 at 16:02
40

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

Palash Roy
  • 1,547
  • 1
  • 15
  • 11
0

You can also use a readonly textarea element instead of <div or <p> to keep the format of original string.

Iman Norouzi
  • 11
  • 1
  • 6
0

try like this 

<div ng-bind-html="myMsg"></div>

$scope.myMsg =  `Below is the result:  <br>Successful:1,  <br>Failed:2`  // Use backtick
kumar chandraketu
  • 2,232
  • 2
  • 20
  • 25
-2

You have done the right thing. But if you are showing this in a browser, the \n means didley.

You have to do:

title: string = "My<br>Title"

Now if you are using a fancy front end tool like React, you will have to deal with unsafe HTML in strings...

Pointy
  • 405,095
  • 59
  • 585
  • 614
Brdavs
  • 35
  • 3
  • This question is tagged as "React", JSX will render "My
    Title" with proposed code.     – Mosè Raguzzini Dec 06 '17 at 16:00
  • The accepted solution is excellent, because it's purely CSS and has nothing to do with React or Angular. JSX however will not render this string. You will have to do this: `
    Title"}}/>`
     – Brdavs Dec 27 '17 at 09:42