Solution 1 :

Not sure what you’re trying to achieve but you could just return template instead of template.content.firstChild and then use property binding instead of string interpolation as follows:

<div [innerHTML]="inputHead.innerHTML | sanitizeHtml"></div>

The method htmlToElement returns an object of type HTMLTemplateElement and you need to bind to its innerHTML property. Also, sanitize the value as Angular recognizes it as an unsafe value.
Here’s the updated Stackblitz:

Problem :

I need to input element in the table header, headers are passed from ts file. I stored the tag from string and stored in the variable and padding to header and its showing [HTMLInputElemnt] in the header.

I need inputs in that place, How to achieve it??
Thanks In advance.


export interface Custom {
  title?: string;
  field?: string;
  default?: 0;
  type?: string;

TypeScript Functions

     ngOnInit() {
    this.inputHead = this.htmlToElement('<input value="3">');

    this._config = {
      name: "Custom",
      properties: this._tableHeader

    this._tableHeader = [
      { title: 'Test Name', field: 'testname', type: 'text', default: 0 },
      { title: 'Initial', field: 'initial', type: 'any', default: 0 },
      { title: this.inputHead, field: 'check', type: 'any', default: 0 },
      { title: this.inputHead, field: 'check', type: 'any', default: 0 }

    this.testData = [
      { testname: 'Color Test' },
      { testname: 'Humidity Test' },
      { testname: 'Weight Test' },
      { testname: 'Composition Test' },
   htmlToElement(html:any) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    console.log(template.content.firstChild ,);
    return template.content.firstChild;   

Output i am getting


Comment posted by Rajat

Can you create a Stackblitz example?

Comment posted by

Comment posted by Hithesh Veer

in your example, can i pass different increment values from array?

Comment posted by Rajat

What do you mean?

Comment posted by……

Comment posted by Rajat

Yeah, that should be doable. Try using *ngFor

Comment posted by Hithesh Veer

got it @Rajat TY