Inject <input> in innerHTML angular 2

Question

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

The .ts :<

Answer 1

create sanitizing.ts file when you use it for bind inner html.

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

@Pipe({
  name: 'sanitizeHtml'
})
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private _sanitizer:DomSanitizer) {
  }

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

now register this module into your app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { routes } from './app.routing';

import { SanitizeHtmlPipe } from './product_details/filter';

@NgModule({
  declarations: [
    SanitizeHtmlPipe
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    CookieLawModule,
    routes
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

now use when you can bind your html eg. productDetails.html

   

    

      
Detail
    
    

      

        

          

            
          
          
Name:- {{ product_details.product_name }}
          
Price:- {{ product_details.product_price }}
          
Selling Price:- {{ product_details.product_discount_price }}