Simple Blog post display with Firestore

Question

I'm creating a bare-bones blog with Angular 5 and a Firestore database. I'm able to save to the database and retrieve the data for display. The problem is when I save the text area value to the database. It doesn't retain the line breaks and spacing I would want and therefore upon retrieval, it's just a single line string. I'm keeping it super simple until I work out these types of issues I'm unfamiliar with.

Any suggestions a simple and effective way of fixing this issue?

This is how I'm currently displaying and saving the data.

ngOnInit() {
  this.createForm();
  this.postCollectionRef = this.afs.collection('posts');
  this.postCollectionList = this.postCollectionRef.valueChanges();
}

addPost(val) {
  this.postCollectionRef.add({ title: val.title, body: val.body });
}

<div>
  <ul>
    <li *ngFor="let post of postCollectionList | async">
      {{ post.title }}
      <br> {{ post.body }}
    </li>
  </ul>
</div>

Answer 1

To me this looks like an HTML/CSS issue -- <li>, like most of HTML elements, collapse whitespace sequences by default. Try wrapping {{ post.body }} inside a <pre> tag, or add style="white-space: pre;" to <li> elements.