Skip to content

Passing a complicated input (object/array) to a web component converted by angular elements #24415

Description

@Slash7GNR

I'm submitting a...


[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I've created a simple angular component with an array as an input, then used it as a web component(using angular elements new feature) outside angular (in a static HTML page) but I couldn't pass a value to the input

Expected behavior

I would like to be able to pass a complicated input to my web component (array / object)

Minimal reproduction of the problem with instructions

  1. You can clone this repo:
    https://github.com/Slash7GNR/ndv-angular-elements
  2. in app.component.ts, add an input of type string[]
  3. use the array you created in the template (using *ngFor)
  4. run npm run build:elements
  5. open test.html file which is in /elements folder, edit it and try to pass the array's attribute

What is the motivation / use case for changing the behavior?

I would like to convert one of my angular component to a web component using angular elements, and this component has a input of array of objects.

Environment


Angular version: 6.0.3


Browser:
- [x ] Chrome (desktop) version 66.03
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 8.11.2  
- Platform:  Windows 

Others:


When I tried it by myself in various ways (passing it through the DOM element / in javascript) I've got the following error:

> Uncaught Error: Cannot find a differ supporting object ‘wow,wow2’ of type ‘string’. NgFor only supports binding to Iterables such as Arrays.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions