I want to append htmlString in a div tag.
app.component.ts file,
public htmlString:string = '';
this.htmlString:string = '<img id="img" src="assets/imgages/image.jpg">
<script>
document.getElementById("img").onclick = function(){
alert('click on image');
};
</script>';
app.component.html
<div></div>
I have used below code but script return as a plain text.
<div [innerHTML]="htmlString"></div>
How to solve it?
You can't do that. Angular ignores the <script> tag altogether. From the docs:
HTML is the language of the Angular template. Almost all HTML syntax is valid template syntax. The
<script>element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. In practice,<script>is ignored and a warning appears in the browser console
To display content based on a click event you can do something similar to:
.ts
export class AppComponent {
displayData: boolean;
content: string = 'Something to be displayed on click event';
appendData() {
this.displayData = true;
}
}
.html
<img id="img" src="assets/imgages/image.jpg" (click)="appendData()">
<div *ngIf="displayData">
{{content}}
</div>
Here's the stackblitz for the same.
As a simple workaround you can try like this:
HTML:
<div (click)="showAlert()">
<div [innerHtml]="htmlString"></div>
</div>
TS:
htmlString: any = '<img id="img" src="assets/imgages/image.jpg">'
showAlert(){
alert('click on image');
}
