Angular 14 innerHtml example with property binding and event handler

This tutorial solves the below problems in the HTML binding Angular application.

How to do string raw HTML binding in Angular?
Render HTML strings with HTML tags
How innerHtml attribute in Angular work?
How to sanitize HTML tag content with DomSanitizer
innerHtml change event handler exam

What is innerHTML in Angular?

Strings are displayed in Angular using interpolation {{}} syntax. Angular supports display string that contains raw HTML tags using innerhtml property. It is a standard HTML tag that supports angular using property binding [] syntax as given below

<div [innerHtml]="expression">

How do I display HTML inside an Angular binding?

Angular supports raw HTML binding using the innerHtml tag attribute

export class FirstComponent {
  rawHtml: string = "Hello  <strong>User</strong>, Welcome to <i>my site</i>";
}

and html component

<div [innerHtml]>Display raw html content</div>

What is innerHTML used for?

innerHtml attribute for HTML elements used to add or update content such as RAW HTML or XML. Standard HTML supports this tag in all the latest browsers. It also implemented in a framework with 2-way binding in the Angular framework

Angular 14 innerHtml binding example

In Angular, It is simple to bind the properties and events using two-way binding syntax.

Property binding can be done using the below syntax.

[property] = "javascriptexpression";

Event binding syntax as seen below

event = "javascriptexpression";

The above two bindings such as Property and event binding can be written with i.e two-way binding.

syntax is

[property] = "javascriptexpression";

JavaScript expressions are either values and properties from json objects or JavaScript functions.

Suppose, Sometimes we want to bind the HTML response instead of the JSON response in the form of a string.

How does HTML binding work in Angular applications?

using innerHtml attribute binding, We can bind HTML content in the form of a string.

The innerHtml attribute can be added to the HTML tag in two ways.

Syntax:

<div [innerHTML]="variable"></div>
<div innerHTML="{{variable}}"></div>

Here is a typescript component

Created variable content to hold HTML tag strings.

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  content: string;
  constructor() {
    this.content = "<i>html response</i>";
  }
}

Here is the HTML component

Angular treats innerHtml content as unsafe, so it does sanitize automatically.

<h3>Angular html binding Innerhtml example</h3>
<span [innerHtml]="content"></span>

There is a limitation to this approach.

As the raw HTML content is passed to the angular component, We have to check whether HTML is trusted or not.

Then, How to sanitize raw HTML Angular manually?

imported DomSanitizer in the angular component
declared variable content of type SafeHtml
Pass the content bypassSecurityTrustHtml and return trusted and safe HTML string content

import { Component } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  content: SafeHtml;
  constructor(private sanitizer: DomSanitizer) {
    this.content = this.sanitizer.bypassSecurityTrustHtml(
      "<i>html response</i>"
    );
  }
}

Angular innerHtml event handler inside HTML content example

HTML tag string content contains events as part of content, Then how do you initiate a click event bind handler?

In Angular events, listeners are attached to handlers once content is loaded.

ngAfterViewChecked call method used which is a call back method running whenever change detection

In the below example, the button definition is displayed using innerHtml

Once the button is rendered, We are adding click event binding to the button inside the ngAfterViewChecked method. ElementRef QuerySelector method is used to select the DOM Button using id.

Here is a complete example for event listener for innerHtml

import { Component, ElementRef } from "@angular/core";
import { DomSanitizer, SafeHtml } from "@angular/platform-browser";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  content: SafeHtml;

  constructor(private elementRef: ElementRef, private sanitizer: DomSanitizer) {
    this.content = this.sanitizer.bypassSecurityTrustHtml(
      '<button type="button" id="submitButton" (click)="openWindow()">Submit</buttn>'
    );
  }
  openWindow() {
    alert("Welcome");
  }
  ngAfterViewChecked() {
    if (this.elementRef.nativeElement.querySelector("#submitButton")) {
      this.elementRef.nativeElement
        .querySelector("#submitButton")
        .addEventListener("click", this.openWindow.bind(this));
    }
  }
}

Stackblitz code

You can find the code🔗 for this tutorial

Conclusion

to sum up, Angular innerHtml attributes provide a dynamic binding of HTML string content, and also using ngAfterViewChecked, we can bind the event listeners

Angular 14 innerHtml example with property binding and event handler

#What is innerHTML in Angular?

#How do I display HTML inside an Angular binding?

#What is innerHTML used for?

#Angular 14 innerHtml binding example

#Angular innerHtml event handler inside HTML content example

#Stackblitz code

#Conclusion