0

I am trying to set innerHTML in a div but the directive used in the text is ignored. I am not sure if it is a invalid attribute(according to HTML) So below is my code:

<table class="table">
<tbody>
  <tr>
    <td>
      <div [innerHTML]="issue.longText"></div>
    </td>
  </tr>
</tbody>
</table>

the value of issue.longText in component.ts is:

<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span [issueOpener]='{"recordId": 4, "page":1}'>link</span>)</li></ul>

And when I inspect the div I've got the following:

<ul><li>20/07/2018 - Hello!This is the test issue on click on it(<span>link</span>)</li></ul>

Directive issueOpener is removed from the span. So how can I prevent this directive? Any help would be greatly appreciated.

Adrien Brunelat
  • 4,492
  • 4
  • 29
  • 42
Ajay Yadav
  • 47
  • 9

2 Answers2

0

This is wanted behavior and here is why : when you write Typescript code, you aren't writing your final application. Your code needs to be compiled first.

To be compiled, your code goes through a process ran by the CLI : during this process, the compiler replaces every piece of Angular code with valid JS code.

This means for instance, that (click) event become onclick (This one's not entirely true, but that pictures the point I'm making).

When you use innerHtml, you write final code : it won't be compiled. It's not Angualr code, so it won't work like you hoped.

0

Ajay you can do one thing and that will surely work in your case. Please refer following link:-

Angular 5 - How to call a function when HTML element is created with *ngFor

You can write logic on ngAfterViewInit() that should be responsible for adding directive at the HTML which is now loaded so that directive can be added dynamically. Refer:- How to dynamically add a directive?

Abhishek Sharma
  • 360
  • 1
  • 10