unable to bold a particular word inside td tag of a table in angular

Question

I am trying to show some words in bold inside a table. That is, I am putting a sentence inside td tag, and I want to bold some words of that sentence.it is working when I put a string in Html and give to that word. but when I give a variable it is not working.

<table class="action_tables" border="1">
   <tr>
      <td class="header_column">Name1:</td>
      <td class="content_column">this is <b>bold</b></td>
   </tr>
   <tr>
      <td class="header_column">Name2:</td>
      <td class="content_column">{{element[0].matched_keyword}}</td>
   </tr>
   <tr>
      <td class="header_column">Subject1:</td>
      <td class="content_column">{{element[0].nlp_matched_sentence}}</td>
   </tr>
   <tr>
      <td class="header_column">bold value1:</td>
      <td class="content_column">{{x}}</td>
   </tr>
   <tr>
      <td class="header_column">bold value2:</td>
      <td class="content_column"><span style="font-weight:bold">Your bold text</span></td>
   </tr>
</table>

.ts file

element = [
    {
      id: 5636,
      matched_keyword: "test",
      nlp_matched_sentence:
        "The <strong>Air Force</strong> Test Center"
    }
  ];

after my research I got 3 solutions but none of them are working for me. please check the demo for more information.

stackbliz demo

Answer 1

Take a look at demo code

You need to add [innerHTML] as below:

    <td class="content_column" [innerHTML]="element[0].nlp_matched_sentence"></td>

Answer 2

To set html content programatically, we need to use innerHTML.

To use innerHTML as a data binding, we need to use interpolation syntax => innerHTML = {{}}

To use innerHTML as property binding, we need to use square brackets syntax => [innerHTML]=""

Change your html code like below,

<table class="action_tables" border="1">
  <tr>
    <td class="header_column">Name:</td>
    <td class="content_column">this is <b>bold</b></td>
  </tr>
  <tr>
    <td class="header_column">Name:</td>
    <td class="content_column">{{ element[0].matched_keyword }}</td>
  </tr>
  <tr>
    <td class="header_column">Subject:</td>
    <td class="content_column">
      <div innerHTML="{{ element[0].nlp_matched_sentence }}"></div>
    </td>
  </tr>
  <tr>
    <td class="header_column">bold value:</td>
    <td class="content_column"><div innerHTML="{{ x }}"></div></td>
  </tr>
</table>