{

Angular raw html binding |innerHtml example


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 works?
  • How to sanitize HTML tag content with DomSanitizer
  • innerhtml change event handler exam

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"

Property and event binding i.e two-way binding syntax is

[(ngModel)]="property"

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

Suppose, Sometimes we want to bind the HTML response instead of the JSON response.

How HTML binding works in Angular application

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

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 html component

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

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

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

Then, How to sanitize raw HTML Angular manually?

  • imported DomSanitizer in 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>"
    );
  }
}

Change event handler inside HTML content string using innerHtml

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 this below example, 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

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.