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?

Answer 1

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()