What is the purpose of innerHTML?

The innerHtml is a property of HTML-Elements, which allows you to set it's html-content programmatically. Let's display the below html code snippet in a <div> tag as below using innerHTML binding,

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

and define the htmlSnippet property from any component

export class myComponent {
  htmlSnippet: string = '<b>Hello World</b>, Angular';
}

Unfortunately this property could cause Cross Site Scripting (XSS) security bugs when improperly handled.