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" — Heretic Monkey
– Heretic Monkey, Commented Jan 10, 2020 at 14:04

Ling Vu · Accepted Answer · 2020-01-10 14:20:18Z

4

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

edited Jan 10, 2020 at 14:20

answered Jan 10, 2020 at 14:13

Ling Vu

5,1896 gold badges28 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Thomas Clague · Accepted Answer · 2020-01-10 14:05:44Z

1

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

answered Jan 10, 2020 at 14:05

Thomas Clague

5571 gold badge5 silver badges17 bronze badges

1 Comment

Bitly Over a year ago

Thanks for the solution. I have been banging my head for this the entire day. It works perfectly. Stackoverflow community is awesome :)

Aditya Vashishtha · Accepted Answer · 2020-01-10 22:29:07Z

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, 2020 at 22:29

Aditya Vashishtha

1891 silver badge17 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related