-2

I want to kind of use innerHTML on the value which I recieve from backend and bind it to the matInput.

Is this possible?

Rishabh
  • 7
  • 3
  • Why do you receive HTML from the backend in the first place, instead of receiving structured data as JSON? You should fix that instead of implementing dirty workarounds. – JB Nizet Nov 24 '19 at 10:01
  • It is a structure json which has a name field in it. The name field has values which has HTML markup in it. I don't have the control on data which is coming in. This is just a mock scenario which I have created in the question. – Rishabh Nov 24 '19 at 10:04
  • Use the DOM API of the browser to create an element from this HTML, and use this same DOM API to then extract the text out of this element. – JB Nizet Nov 24 '19 at 10:13
  • p.s: before it crosses your mind, security wise, make sure you avoid using `ViewChild`, `[innerHTML]` or such, to directly place values in the DOM. – Stavm Nov 24 '19 at 10:18
  • @JBNizet can you please give an example. – Rishabh Nov 24 '19 at 10:33
  • `const parser = new DOMParser(); const doc = parser.parseFromString('

    Hello

    ', 'text/html'); console.log(doc.documentElement.innerText);`     – JB Nizet Nov 24 '19 at 10:40
  • Thank you for the example..but this removed the tags and didn't format as innerHTML. After reading more about this, i came to know you can't bind innerHTML to input fields. So, I had to create a fake input as a div as it was a read-only field. – Rishabh Dec 01 '19 at 05:09

1 Answers1

0

Angular binding protects you from XSS by escaping html/script in text. You need to DomSanitizer to return safe html for binding. Checkout it out https://angular.io/api/platform-browser/DomSanitizer

Aboodz
  • 1,549
  • 12
  • 23