Angular Elements input is not defined on Init

[qkhanhpro]

🐞 bug report

Affected Package

The issue is caused by package @angular/elements

Is this a regression?

I'm not sure

Description

Passing a function into angular custom element, the input/component life cycle is different from normal angular component, causing some problems with apps dependent on the Input function at init.

I think the function passed down is not available at "OnInit" phase for the web element
but it's available for the Angular component

Following the provided stackblitz, only the web element throws the error.

🔬 Minimal Reproduction

https://stackblitz.com/edit/is-not-a-function

🔥 Exception or Error

preview-ee4d58d6ef0576b4e139b.js:1 TypeError: co.getString is not a function
at Object.eval [as updateRenderer] (HeartComponent.html:8)
at Object.debugUpdateRenderer [as updateRenderer] (services.ts:408)
at checkAndUpdateView (view.ts:368)
at callViewAction (view.ts:615)
at execComponentViewsAction (view.ts:559)
at checkAndUpdateView (view.ts:370)
at callWithDebugContext (services.ts:639)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (services.ts:345)
at ViewRef.detectChanges (refs.ts:259)
at ComponentNgElementStrategy.detectChanges (component-factory-strategy.ts:251)

🌍 Your Environment

Angular Version:

@angular/common6.0.0-rc.4
@angular/compiler6.0.0-rc.4
@angular/core6.0.0-rc.4
@angular/elements6.0.0-rc.4
@angular/forms6.0.0-rc.4
@angular/platform-browser6.0.0-rc.4
@angular/platform-browser-dynamic6.0.0-rc.4
@angular/router6.0.0-rc.4
@webcomponents/custom-elements1.1.0
core-js2.5.4
rxjs6.0.0-rc.0
zone.js

Anything else relevant?
On my main project, using Angular V6.0.3, I experience the same behaviour...

[qkhanhpro]

Just for your information, seems like someone else get the same issue with V7
#28266

[robwormald]

This works as intended. The thing about Custom Elements is that there are no guarantees about how they'll be used, so as an author, you can't make assumptions that things will exist.

(In this case, there's not a huge practical benefit to using Elements, but...) under the hood, Angular is doing something like this:

const el = document.createElement('my-custom-element');
parentEl.appendChild(el); //connectedCallback runs here
el.someProp = someValue;

Angular Elements uses the connectedCallback to trigger rendering, because 98% of the time, that's the behavior you want. So, the someProp value is set later.

This has been argued before, and the answer is still "code defensively" - especially with Elements, where you have no idea how your Element might be used:

const el = document.createElement('my-custom-element');
parentEl.appendChild(el); //connectedCallback runs here
el.someProp = someValue;

const el = document.createElement('my-custom-element');
el.someProp = someValue;
parentEl.appendChild(el); //connectedCallback runs here

<my-custom-element some-prop="someString"></my-custom-element>

All of those are valid ways to use a Custom Element, and all of them are going to have a different order of operations. See #18909 for more info.

[vishranti5]

Hi, i am also facing same issue, any updates on same?
I have used angular element to create webcomponent and used this webcomponent in base application. while passing complex object from base application as input property, i get this object on Onchanges in webcomponent but Oninit it is undefined

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}