Is there a way I can incorporate mailto links with ngFor?

Question

I create an Object and use ngFor to loop through it and create a table. I would like to somehow incorporate mailto links if possible.

I have this finalResults object that looks something like this:

[
{key: 'example@example.com', value: 'message'}
]

Where message is something like

"Please contact the Login Team for help."

I would like to make Login Team a mailto link.

I have already tried making the message like this

Please contact the <A HREF="mailto:name@mydomain.com">Login Team</A> for help.

But on the webpage it just displayed that exactly. There was no link.

I use ngFor to loop through my object and make a table.

< <tr>
        <th *ngFor="let col of displayedColumns">
          {{ col }}
        </th>
      </tr>
      <tr *ngFor="let item of finalResults">
        <td>{{ item.key }}</td>
        <td>{{ item.value }}</td>
      </tr>

      <tr></tr>
    </table>

Is there some way to do this?

Answer 1

If you want to keep your text as html text then consider using innerHTML binding:

ts

finalResults = [
  { 
     key: 'example@example.com',
     value: 'Please contact the <A HREF="mailto:name@mydomain.com">Login Team</A> for help.' 
  }
];

html

<td [innerHTML]="item.value"></td>

Ng-run Example