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?

Answer 1

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

Answer 2

您需要使用“\\n”而不是“/n”

Answer 3

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.