Angular innerHTML not working this string text

Question

I'm facing an issue I'm getting an string

const str = '<p>Please ensure Process Model diagram represents Functions adequately (boxes that represent an activity or group of activities that produce an outcome):</p><p><br></p><p><a href="https://www.google.com" rel="noopener noreferrer" target="_blank">Click here</a></p>'

<div [innerHTML]="str"></div>

I want to remove this paragraph and other HTML constructs, tried using innerHTML but its not stripping HTML elements, not sure why. How can we remove html elements and display text and link?

Answer 1

You have to use DomSanitizer.

public str = this.sanitized.bypassSecurityTrustHtml('<p>Please ensure Process Model diagram represents Functions adequately (boxes that represent an activity or group of activities that produce an outcome):</p><p><br></p><p><a href="https://www.google.com" rel="noopener noreferrer" target="_blank">Click here</a></p>');

constructor(private sanitized: DomSanitizer) {}