Property Binding [innerHTML] is removing the anchor tag functionality in angular 4 data binding

Question

Hi,

The property binding [innerHTML] takes only the text in between the raw html tags and the anchor tag functionality is not getting applied for data binding. So i want the anchor tag functionality should work. Means the anchor tag is getting removed when i bind this in template. My target is to achieve both innerHTML and as well as the anchor tag functionality. When i click on the any notification list item it will take me to another page. Because the JSON gives me that data only. Can anybody help me?

<a data-link="admin-invoice-list" href="javascript:;" [innerHTML]= item.message"></a>

The JSON data comes in this format:

{
            "id": "225",
            "message": "<a data-link="/user/121/compliance_details" href="javascript:;">Company has  uploaded a compliance document on the Supplier Hub</a>",
            "status": "0"
}

How can we achieve this in angular 4?

It looks like your `item.message` is already valid html. If you cannot make it return raw text, you can dump that html onto your UI directly by setting the inner html of its parent element. Just be sure to sanitize that html for malicious code. Reference: https://stackoverflow.com/questions/31548311/angular-html-binding — Chuanqi Sun, Dec 08 '17 at 07:24
Yes its a valid html coming from the api in json format but when i am trying to bind in the template with property binding like [innerHTML]="item.message" then only in between the raw html text is binding in the template but i want to apply the click functionality when the user clicks on it he should be taken to the corresponding page as which is there in the json format. — youi, Dec 08 '17 at 12:19
In json, i am getting in this form Company has uploaded a compliance document on the Supplier Hub and i am taking only the inner html part only i want to apply the data-link also to the list item. How can i achieve? I heard about some concept as DOM sanitizer. But there is not clear working example? Can anyone provide example? — youi, Dec 08 '17 at 12:21
is this your final desired html output? `Company has uploaded a compliance document on the Supplier Hub`? If so, I think you can use some regex to parse out the inner text first and render that inner text into your angular template. — Chuanqi Sun, Dec 09 '17 at 06:17

score 0 · Answer 1 · answered Apr 09 '20 at 19:41

DomSanitizer is your friend.

Import the required:

import { DomSanitizer } from '@angular/platform-browser';

Modify your component's constructor:

constructor(private sanitizer: DomSanitizer) { }

Bypass sanitization:

this.item.message = this.sanitizer.bypassSecurityTrustHtml([yourJsonObj].message) as string;

Property Binding [innerHTML] is removing the anchor tag functionality in angular 4 data binding

1 Answers1

Linked