CODEWITHSUNDEEP
angular
Shivani Singh
Shivani Singh

Reputation: 41

getting [object Object] instead of actual object values on dynamically creating template + Angular4

My Scenario: I have a component:

@Component({
  selector: 'child-table',  
  template: `<dynamic [html]="dynamicHtml"></dynamic>`
})

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.

public ngOnInit(): void {
  this.dynamicHtml=``;
  this.dynamicHtml = '<table>';
  for (let propertyItem of this.propertyItems) {
    this.dynamicHtml+= this.getPropertyTemplate(propertyItem);
  }
  this.dynamicHtml+='</table>';
}

public getPropertyTemplate(propertyItem):string{
  let propValTemplate:string = `<tr>`;
  propValTemplate+=this.getTemplateOfPropType(propertyItem);
  propValTemplate+=`</tr>`;
  return propValTemplate;
}

private getTemplateOfPropType(property):string{
  if(property.propertyType == "Numeric")
  {
      return `<numeric-editable-property numericEditablePropertyItem="${property.value}" childproperty="${property}"></numeric-editable-property>`;
  }
  else if(property.propertyType == "String")
  {
      return `<string-editable-property stringEditablePropertyItem="${property.value}" property="${property}"></string-editable-property>`;
  }
}

Template for numeric-editable-property tag:

@Component({
  selector: 'numeric-editable-property',
  styleUrls: ['./propertyTemplateStyling.css'],
  template: `<td><input type="text" value={{numericEditablePropertyItem}} [(ngModel)]="numericEditablePropertyItem" #textarea
(change)="onPropValChange($event, textarea.value, childproperty)"></td>`     

})

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);
  }
}

Issue I am facing:

Unable to pass property as object from func getTemplateOfPropType(), statement:
return <numeric-editable-property numericEditablePropertyItem="${property.value}" childproperty="${property}"></numeric-editable-property>, 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.

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.

Upvotes: 1

Views: 1583

Answers (1)

Shubham Kandiyal
Shubham Kandiyal

Reputation: 340

hey you may be used as

In Views used json pipe

{{yourObject | json }}

In Model used json stringify

console.log(JSON.stringify(yourObject))

Thanks

Upvotes: 1

Related Questions