Error trying to diff '[object Object]' in Angular Elements webcomponent

Question

I exported Angular component as framework agnostic element with Angular Elements.

The Angular component accepts array of "steps"

export class FormWizardComponent {
@Input() public steps: any[] = new Array<any>();
}

Steps:

steps = [{ label: 'Step A' }, { label: 'Step B' }, { label: 'Step C' }, { label: 'Step D' }, { label: 'Step E' }];

And the component is used in Angular like this:

<app-form-wizard [steps]="steps">
</app-form-wizard>

Now this element is exported, built and I want to use it in plain HTML page like this:

<script>
  $(document).ready(function() {
    var steps = [
      { label: "Step A" },
      { label: "Step B" },
      { label: "Step C" },
      { label: "Step D" },
      { label: "Step E" }
    ];

    $("#wizard").attr("steps", steps);
  });
</script>

<form-wizard-element id="wizard"> </form-wizard-element>

This is giving me error:

ERROR Error: Error trying to diff '[object Object],[object Object],[object Object],[object Object],[object Object]'. Only arrays and iterables are allowed

How should I pass data to component?

score 1 · Answer 1 · answered Sep 17 '20 at 09:47

1

Try this in your HTML

<div *ngFor="let step of steps">
    {{step.label}}
</div>

answered Sep 17 '20 at 09:47

Alberto Valerio

388
2
6
18

1

@Tschareck, this answer is correct, So apply this answer to your application. Below link provide you access to live a stackblitz enviornment, where solution is working properly. https://angular-questions-63935272.stackblitz.io – VSM Sep 17 '20 at 10:05
@tschareck , could you mark this answer as accepted? It would help many people – Alberto Valerio Sep 18 '20 at 07:58

score 0 · Accepted Answer · answered Oct 08 '20 at 09:29

Web Components do not accept object as input. The input should be string:

<form-wizard steps='[{"label":"Step A" },
  {"label":"Step B" },
  {"label":"Step C" },
  {"label":"Step D"},
  {"label":"Step E"}]'>
</form-wizard>

Then the string would have to be turned into object with JSON.parse()

Error trying to diff '[object Object]' in Angular Elements webcomponent

2 Answers2