Alexy Vercruysse Alexy Vercruysse - 1 year ago 783
TypeScript Question

Inject <input> in innerHTML angular 2

I am trying to inject a input HTML tag with Angular 2, here is my project :

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

The .ts :

export class FaxSendComponent {
inputpdf = '<input type="text" name="fname">';

Here is the log from the console :

WARNING: sanitizing HTML stripped some content (see

I try with other html tag like
and it works perfectly.

Answer Source

You should trust the HTML first before injecting it. You have to use the DomSanitizer for such a thing. An <h3> element is considered safe. An <input> element is not.

Change your FaxSendComponent to something like this:

export class FaxSendComponent  {

    private _inputpdf: string = '<input type="text" name="fname">';

    public get inputpdf() : SafeHtml {
       return this._sanitizer.bypassSecurityTrustHtml(this._inputpdf);

    constructor(private _sanitizer: DomSanitizer){}

And have your template stay the same as this:

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

A little heads-up though:

WARNING: calling this method with untrusted user data exposes your application to XSS security risks!

If you plan on using this technique more, you can try to write a Pipe to fulfil this task.

    name: 'sanitizeHtml'
export class SanitizeHtml implements PipeTransform  {

   constructor(private _sanitizer: DomSanitizer){}  

   transform(v: string) : SafeHtml {
      return this._sanitizer.bypassSecurityTrustHtml(v); 

If you have a pipe like this, your FaxSendComponent will change to this:

   selector: 'fax-send',
   template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>`
export class FaxSendComponent  {

    public inputpdf: string = '<input type="text" name="fname">';

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download