title: angular 6 display dynamic html
body: <p>Would someone please clarify for me why this:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { InputGroup } from "../input-group";
  
  @Component({
    selector: 'app-input-group',
    template: `&lt;ul&gt;
       &lt;li *ngFor="let input of inputs;"&gt; 
         &lt;div innerHtml={{input.name}}&gt;&lt;/div&gt;{{ input.name }},{{input.check}}
       &lt;/li&gt;
     &lt;/ul&gt;
  `,
    // template: '&lt;div ng-bind-html="inputs"&gt;&lt;/div&gt;'
  })
  export class InputGroupComponent implements OnInit {
    public Create_Element(type: string, name: string): HTMLInputElement {
      var element = document.createElement("input");
      element.setAttribute("type", type);
      element.setAttribute("name", name);
      return element;
    }
  
  
    public inputs: InputGroup[] = [
      {
        name: this.Create_Element("text", "food1"),
        check: this.Create_Element("checkbox", "food1Check")
      },
      {
        name: this.Create_Element("text", "food2"),
        check: this.Create_Element("checkbox", "food2Check")
      },
      {
        name: this.Create_Element("text", "food3"),
        check: this.Create_Element("checkbox", "food3Check")
      },
    ];
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>where the "InputGroup" interface is:</p>
  
  <pre><code>export interface InputGroup {
   name: HTMLInputElement,
   check: HTMLInputElement
  }
  </code></pre>
  
  <p>results in the display of:</p>
  
  <pre><code>[object HTMLInputElement]
  [object HTMLInputElement],[object HTMLInputElement]
  [object HTMLInputElement]
  [object HTMLInputElement],[object HTMLInputElement]
  [object HTMLInputElement]
  [object HTMLInputElement],[object HTMLInputElement]
  </code></pre>
  
  <p>as my ul>li ngfor output.</p>
  
  <p>To clarify:</p>
  
  <p>I am trying to create 3 groups of inputs each with text/checkbox input but instead I get [object object].</p>