How to put rich text in the detail section of angular master/detail collapsible table?

I have an angular master/detail collapsible table, as shown below:

Notice that the text in the detail section is one big paragraph. I want for it to be formatted html instead. There need to be line breaks, bullet and numbered lists, fonts, italic, bold, etc.

The problem is that the number of master table rows are variable, so they are populated using angular *ngFor, or similar. In truth, I am using a third-party library called DevExtreme, but any method is gonna have the same problem. Here is that code:

<dx-data-grid
  id="gridContainer"
  [dataSource]="nutrients"
  [showBorders]=true
>>
  <dxo-scrolling mode="infinite"></dxo-scrolling>
  <dxo-paging [enabled]="false"></dxo-paging>
  <dxi-column dataField="name">Name</dxi-column>
  <dxi-column dataField="unitName">Unit Name</dxi-column>
  <dxi-column dataField="rda">RDA</dxi-column>
  <dxo-master-detail [enabled]="true" template="detail"></dxo-master-detail>

  <div class="info" *dxTemplate="let nutrient of 'detail'; let i = index;">
    {{ nutrient.data.info }}
  </div>
</dx-data-grid>

The associated detail text in the database is not formatted. If I try to add tags, like <p> they show up in the text literally. I think I need to store the text as markdown but then I don't know how to display it in the detail section.

I've googled for hours but can't find a solution. Any ideas?

The solution was simple, as I thought it had to be. Simply use

<div class="info" *dxTemplate="let nutrient of 'detail';" [innerHtml]="nutrient.data.info">
</div>

The [innerHtml] directive was the key.