In the previous post, we have seen how to bind HTML in Angular. Sometimes the HTML to bind is unsafe and Angular throws WARNING: sanitizing unsafe URL value in the browser console. This tutorial will show 2 ways how to fix it.

Let’s consider this HTML :


This HTML binding throws WARNING: sanitizing unsafe URL value because of  href="javascript:alert('safe html').

Angular Pipe

The first solution uses Angular pipe.

Then use it like this :

Angular Directive

Another approach is to use an Angular directive :

  •  sanitize-html.directive.ts
And its usage is :
Like this the HTML binding is done without warnings.

The tutorial source code is available on Github. Download the source