How to add new line in string in Typescript - Angular 8

Question

I am trying to implement in typescript the following:

this.comments = this.comment1 + '/n' + this.comment2

in HTML it is bound as {{comments}}.

It should print:

comment1
comment2

but it prints:

comment1/ncomment2

I have tried <br\> too but it does not work. How to do it?

Does this answer your question? [Typescript - Creating New Lines in a string using "\n"](https://stackoverflow.com/questions/52220411/typescript-creating-new-lines-in-a-string-using-n) — Heretic Monkey, Jan 10 '20 at 14:04

Ling Vu · Answer 1 · 2020-01-10T14:20:18.820

You can use the innerHTML and innerText directives in any template element for that. Like:

TS

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Hello<br>World';
  weather = 'Super\nsunny\nday';
}

HTML

<div [innerHTML]="name"></div>
<div [innerText]="weather"></div>

Demo for your reference: https://stackblitz.com/edit/angular-chusrl

score 1 · Accepted Answer · answered Jan 10 '20 at 14:05

1

you need to use the "\n" rather than "/n"

answered Jan 10 '20 at 14:05

Thomas Clague

486
1
4
16

1

Thanks for the solution. I have been banging my head for this the entire day. It works perfectly. Stackoverflow community is awesome :) – Bitly Jan 10 '20 at 14:26

score 1 · Answer 3 · answered Jan 10 '20 at 22:29

1

you can try this by using es6 feature template string:-

this.comments = `${this.comment1}
${this.comment2}`;

When you are using typescript then you should use es6 features to leverage more functionality in code.

answered Jan 10 '20 at 22:29

Aditya Vashishtha

189
1
16

How to add new line in string in Typescript - Angular 8

3 Answers3