Q:

Why are my  tags showing in my browser display for angular project

I have text that is being saved from a textarea.  I save it to the database.  I now want to display this text onto another page after submit.  I would like to keep the same format as the original text input.  
This is what shows up on the browser after redirecting to the other page.
Im replacing br with --- or else it will create actual breaks in this text.
--- equals br
"M <---><---/> O <---/><---/>C<---/>Hub<---/>"
How do I display onto the page without the br tags?  I have seen this work in other circumstances but unsure what I am doing wrong.  
I have been able to use the .replace method to replace the enter's with .  The only thing though, the  tag is showing up in the display.
x.component.ts
  getMessages() {
    this._messageBoardService.getMessages().subscribe(
      (data: any) => {
        this.msgList = data
        this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")
      })

  }

x.component.html
<h3>{{ msgList[0].title }}</h3>
<p> {{ msgList[0].message }}</p>

The expected output without the breakpoints is
M
O
C
Hub

A:

Because this is how angular works. It prevents from injection "bad html".
To print html you will need to use DomSanitizer
Change your code
this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "<br />")

to 
 this.msgList[0].message =  sanitizer.bypassSecurityTrustHtml(this.msgList[0].message.replace(/\n/g, "<br />"))

then template 
<p [innerHTML]="msgList[0].message"></p>

BUT for security reason I would not do it I'd better do it with css
p.break-newline{
  white-space: pre-wrap
}

add class
<p class="break-newline"> {{ msgList[0].message }}</p>

And now you dont need to modify your message in code.

