title: Why are my <br> tags showing in my browser display for angular project
body: <p>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.  </p>
  
  <p>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</p>
  
  <p>"M &lt;--->&lt;---/> O &lt;---/>&lt;---/>C&lt;---/>Hub&lt;---/>"</p>
  
  <p>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.  </p>
  
  <p>I have been able to use the .replace method to replace the enter's with <br>.  The only thing though, the <br> tag is showing up in the display.</p>
  
  <p>x.component.ts</p>
  
  <pre><code>  getMessages() {
      this._messageBoardService.getMessages().subscribe(
        (data: any) =&gt; {
          this.msgList = data
          this.msgList[0].message = this.msgList[0].message.replace(/\n/g, "&lt;br /&gt;")
        })
  
    }
  </code></pre>
  
  <p>x.component.html</p>
  
  <pre><code>&lt;h3&gt;{{ msgList[0].title }}&lt;/h3&gt;
  &lt;p&gt; {{ msgList[0].message }}&lt;/p&gt;
  </code></pre>
  
  <p>The expected output without the breakpoints is</p>
  
  <p>M</p>
  
  <p>O</p>
  
  <p>C
  Hub</p>