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