insert line feed inside mat-table cell or replace html tags in text

Question

Our old internet site was getting data from a database and was having HTML tags inside text that was formatting text in the site. I explain.

When I was calling the database to have the text of the field INFO. The text was:

"List of available city:<br>1-Boston<br>2-Washington<br>3-Miami... etc"

So in the old site when I was using my table It was like this:

<table>...
  <td><%= INFO %> </td>

So the site was formatting the text inside the TD field and was giving the list of the city in the cell field of the table like this:

List of available city:
1-Boston
2-Washington
3-Miami

Now we're using Angular and Mat-Table to create a new site. The information is coming from the same database having text already formatting with some HTML tags.

If I use this code:

      <table>
        <tr *ngFor="let rule of element.Reglements">
          <td class="line_rules">{{ rule.Reglement }}</td>
        </tr>
      </table>

Unfortunately the result in the cell gives a text including the HTML tags like this:

"List of available city:<br>1-Boston<br>2-Washington<br>3-Miami... etc"

Question: How can I format my Table cell to use the HTML tags ?

Do I need to change the HTML tags for something else ? (I can directly modify the database or loop though field and replace code before passing data to the table ?

Is there a way to insert line feed in a text cell ?

Thanks

Answer 1

I found something to do this. My code was:

  <table>
    <tr *ngFor="let rule of element.Reglements">
      <td class="line_rules">{{ rule.Reglement }}</td>
    </tr>
  </table>

I do it like this:

<table>
    <tr *ngFor="let rule of element.Reglements">
          <td class="line_rules" [innerHTML]="rule.Reglement"></td>
    </tr>