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:
https://stackblitz.com/edit/angular-n2v9ro

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.

Declaraion:

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

TypeScript Functions

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

    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' },
    ]
    this.cdRef.markForCheck();
  }
   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