title: getting [object Object] instead of actual object values on dynamically creating template + Angular4
body: <p>My Scenario:
  I have a component:</p>
  
  <pre><code>@Component({
    selector: 'child-table',  
    template: `&lt;dynamic [html]="dynamicHtml"&gt;&lt;/dynamic&gt;`
  })
  </code></pre>
  
  <p>On ngoninit(), I am dynamically creating this template on basis of 'propertyType' field present in collection of 'propertyItems' object.
  PropertyType can be Numeric/String/Boolean/List etc. Depending on propertyType, I am fetching the template and embedding it under child-table template.</p>
  
  <pre><code>public ngOnInit(): void {
    this.dynamicHtml=``;
    this.dynamicHtml = '&lt;table&gt;';
    for (let propertyItem of this.propertyItems) {
      this.dynamicHtml+= this.getPropertyTemplate(propertyItem);
    }
    this.dynamicHtml+='&lt;/table&gt;';
  }
  
  public getPropertyTemplate(propertyItem):string{
    let propValTemplate:string = `&lt;tr&gt;`;
    propValTemplate+=this.getTemplateOfPropType(propertyItem);
    propValTemplate+=`&lt;/tr&gt;`;
    return propValTemplate;
  }
  
  private getTemplateOfPropType(property):string{
    if(property.propertyType == "Numeric")
    {
        return `&lt;numeric-editable-property numericEditablePropertyItem="${property.value}" childproperty="${property}"&gt;&lt;/numeric-editable-property&gt;`;
    }
    else if(property.propertyType == "String")
    {
        return `&lt;string-editable-property stringEditablePropertyItem="${property.value}" property="${property}"&gt;&lt;/string-editable-property&gt;`;
    }
  }
  </code></pre>
  
  <hr>
  
  <p>Template for numeric-editable-property tag:</p>
  
  <pre><code>@Component({
    selector: 'numeric-editable-property',
    styleUrls: ['./propertyTemplateStyling.css'],
    template: `&lt;td&gt;&lt;input type="text" value={{numericEditablePropertyItem}} [(ngModel)]="numericEditablePropertyItem" #textarea
  (change)="onPropValChange($event, textarea.value, childproperty)"&gt;&lt;/td&gt;`     
  
  })
  
  export class NumericEditablePropertyTemplateComponent{ 
    @Input() numericEditablePropertyItem;
    @Input() childproperty:switchcommon.IPropertyItem;
    constructor(private deviceMgmtService: DeviceManagementService) {}
  
    public onPropValChange(event: Event, selectedVal: string, property: switchcommon.IPropertyItem): void {
      const message: Message.PropertyUpdateMessage = new Message.PropertyUpdateMessage();
  
      property.value = selectedVal;
      this.deviceMgmtService.updateProperty(property);
    }
  } 
  </code></pre>
  
  <hr>
  
  <p>Issue I am facing:</p>
  
  <p>Unable to pass property as object from func getTemplateOfPropType(), statement:<br>
      return <code>&lt;numeric-editable-property numericEditablePropertyItem="${property.value}" childproperty="${property}"&gt;&lt;/numeric-editable-property&gt;</code>, 
  to 'numeric-editable-property' tag template i.e on calling onPropValChange() fn, childproperty input field shows [object Object] instead of actual object values which I recieve in getTemplateOfPropType() function.</p>
  
  <p>I am new to coding, it will be greatful if somebody can tell me why I am getting [object Object] instead of actual object values. </p>