Allowing HTML Tags within JSON for Display

Question

I'm very new to Angular, but almost 3 decades of development experience. I'm missing something simple, I hope.

Everything works great, but you will notice that in my "Current Owner Mailing Address" it has a HTML break, but when it displays it on the page, I actually see the HTML tag, not the expected break in text. How can I get around this? I'm not having any luck finding any information around it.

I have the following in my component.ts:

public maData = { "groupData": [ 
{ "title" : "Public Records", 
  "datapoints" : [
    {"label" : "Current Owner", "value" : "JOHN SMITH"},
    {"label" : "Current Owner Mailing Address", "value" : "123 FL HIGHWAY 218<BR/>MIDDLEBURG, FL 32068-0000"},
    {"label" : "Loan Recording Date", "value" : "04/10/2015"},
    {"label" : "Loan Borrower Name", "value" : "JOHN SMITH"},
    {"label" : "Concurrent Sale Date", "value" : ""},
  ]}, 
] 

}

My HTML looks like this:

<div name="float_group" style="order:6" class="float group" *ngFor="let ld of maData.groupData">
  <div class="header groupChar">
        {{ld.title}}
  </div>
  <div class="data">
      <div class="contentRow" *ngFor="let dp of ld.datapoints">
        <div class="labelText">
          {{dp.label}}
        </div>
        <div class="valueText">
          {{dp.value}}
        </div>
      </div>
    </div>
  <div class="footer groupChar"></div>
</div>

This is just a POC and an Angular learning exercise for me. My next steps are to tie this to SOAP services that will generate these JSON response, so I will have control of how this is used, but the UI has the show this in multiple lines.

Answer 1

Use innerHtml:

Is used when interpreting a value as HTML

<div class="valueText" [innerHtml]="dp.value"></div>