When I add line break (\n) in paragraph in typescript file and pass that to html is not working

Question

Angular Project:

HTML file

<home-page [copy]="content"></homepage>

TypeScript file

content = `Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. \n It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.`;

Expected:

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Actual:

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.

Answer 1

You can add white-space: pre-line; in your css to render line-break in text.

style.scss

p {
    white-space: pre-line;
}

page.html

<p> {{ content }} </p>

Answer 2

You need to convert the newline to a <br> tag because the paragraph tag does not render newlines as line breaks (except in the source); instead it will render the newline as a space. You also need to use the innerHTML directive in order for angular to render html from a property.

You will then end up with a component similar to this one:

@Component({
  selector: 'home-page',
  template: `<p [innerHTML]="content"></p>`
})
export class MyComonent {
  content = '';

  @Input()
  set copy(input: string) {
    this.content = `<p>${input.split(/\n/g).join('</p><p>')}</p>`;
  }
}

Here is a working example