Angular + Web Components

Hi Arman,
I’ve tried changing the input name with only small case chars and it is working in IE. Not sure whether this really caused the issue.

I have posted some questions in stackoverflow regarding angular-elements but didnot get any response. Questions regarding angular-elements are not getting much attention in stackoverflow. If possible can you check these


Thanks.

Hi, so the thing is (I believe I mentioned it in the article, if not, I have to add) that when you pass data to web component via attributes (inputs), the names get mapped from camelcase to kebabcase, here: if we have a ‘my-web-component’ with an inout that say ‘firstName’, we should have it like this:

<my-web-component first-name="Manoj"></my-web-component>

For example. This mapping is automatic, you can have any Input property name you want, just remember about the mapping (it is done so to adhere to valid HTML standards, html attributes cannot be camlecase, only kebabcase)

Thanks Armen,
It will be very helpful if you provide your thoughts on these questions.

@manojR as per the first question, did you use the webcomponents shim from mentioned in the article?

@armen NO. I’ve used document-register-element 1.8.1 and it is working fine. As it comes along with @angular/elements package it was easier to use.
But versions above and below 1.8.1 doesn’t support es5 output.

The document-register-element package has some issues, Better use the shim I provided in the article, it definitely works. I had the same problem as you back when I was setting my project up, and changing to webcomponents/shim fixed all the issues.