Title: Angular Elements imported by Angular have inconsistent lifecycle · Issue #66588 · angular/angular · GitHub
Open Graph Title: Angular Elements imported by Angular have inconsistent lifecycle · Issue #66588 · angular/angular
X Title: Angular Elements imported by Angular have inconsistent lifecycle · Issue #66588 · angular/angular
Description: Which @angular/* package(s) are the source of the bug? elements Is this a regression? No. This has been the case for as long as I have used Angular, at least 3 years. Description When an Angular component imports another Angular componen...
Open Graph Description: Which @angular/* package(s) are the source of the bug? elements Is this a regression? No. This has been the case for as long as I have used Angular, at least 3 years. Description When an Angular co...
X Description: Which @angular/* package(s) are the source of the bug? elements Is this a regression? No. This has been the case for as long as I have used Angular, at least 3 years. Description When an Angular co...
Opengraph URL: https://github.com/angular/angular/issues/66588
X: @github
Domain: patch-diff.githubusercontent.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Angular Elements imported by Angular have inconsistent lifecycle","articleBody":"### Which @angular/* package(s) are the source of the bug?\n\nelements\n\n### Is this a regression?\n\nNo. This has been the case for as long as I have used Angular, at least 3 years.\n\n### Description\n\nWhen an Angular component imports another Angular component, `ngOnInit`, `effect`s and `resource`s are called once the inputs are set.\n\nWhen an Angular component imports an **Angular Elements element**, `ngOnInit`, `effect`s and `resource`s are called before the inputs are set.\n\nThere seems to be no alternative lifecycle hook to know when the inputs have indeed been set.\n\n### Please provide a link to a minimal reproduction of the bug\n\nhttps://stackblitz.com/edit/angular-fpq5sqat?file=src%2Fmain.ts,src%2Fsub-component.ts,src%2Findex.html,package.json\n\n### Please provide the exception or error you saw\n\n```true\nIn the Angular component, `ngOnInit` is correctly called with values.\n\nIn the Angular Elements element, `ngOnInit` is called with undefined inputs.\n```\n\n### Please provide the environment you discovered this bug in (run `ng version`)\n\n```true\nSee Stackblitz, 21.1.0 for all the packages. However, this dates back at least to Angular 15.\n```\n\n### Anything else?\n\nIf an input is marked as required, the following error is logged.\n\n```\nError: NG0950: Input \"id\" is required but no value is available yet. Find more at https://v21.angular.dev/errors/NG0950\n```\n\nNote that this error only applies for dynamic inputs. With the following example, `language = input.required()` does work.\n\n```html\n\u003ccomponent-as-element [id]=\"id()\" language=\"de\" /\u003e\n```\n\nI have also tested with `[attr.]`, to force that the fields are passed as attributes rather than properties, with the hope that this would mean that they could be passed as soon as the element is created, but this did not change anything.\n\n```html\n\u003ccomponent-as-element [attr.id]=\"id()\" [attr.language]=\"language()\" /\u003e\n```","author":{"url":"https://github.com/c-harding","@type":"Person","name":"c-harding"},"datePublished":"2026-01-15T16:36:04.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/66588/angular/issues/66588"}
| route-pattern | /_view_fragments/issues/show/:user_id/:repository/:id/issue_layout(.:format) |
| route-controller | voltron_issues_fragments |
| route-action | issue_layout |
| fetch-nonce | v2:8345bf04-c1e0-5a52-3a0c-4e862f9233d2 |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | A602:139CD4:F5C080:142DBEF:696B66B6 |
| html-safe-nonce | 379d69e2cade2254a3b4e77a62f31e90874c194ee582fbe3ea776a871dfc987a |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBNjAyOjEzOUNENDpGNUMwODA6MTQyREJFRjo2OTZCNjZCNiIsInZpc2l0b3JfaWQiOiIyMDczMjU5MzM5MjE5MTY2OTAyIiwicmVnaW9uX2VkZ2UiOiJpYWQiLCJyZWdpb25fcmVuZGVyIjoiaWFkIn0= |
| visitor-hmac | d77313b8b8fcf69c2f5585b1f59eacf0cfc0b623587dff5becfbedb8633c2685 |
| hovercard-subject-tag | issue:3818291477 |
| github-keyboard-shortcuts | repository,issues,copilot |
| google-site-verification | Apib7-x98H0j5cPqHWwSMm6dNU4GmODRoqxLiDzdx9I |
| octolytics-url | https://collector.github.com/github/collect |
| analytics-location | / |
| fb:app_id | 1401488693436528 |
| apple-itunes-app | app-id=1477376905, app-argument=https://github.com/_view_fragments/issues/show/angular/angular/66588/issue_layout |
| twitter:image | https://opengraph.githubassets.com/acdbb5f6f5ca18fee707d202b86f14e6fc2ff355a4c04da8cebddf65683fb373/angular/angular/issues/66588 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/acdbb5f6f5ca18fee707d202b86f14e6fc2ff355a4c04da8cebddf65683fb373/angular/angular/issues/66588 |
| og:image:alt | Which @angular/* package(s) are the source of the bug? elements Is this a regression? No. This has been the case for as long as I have used Angular, at least 3 years. Description When an Angular co... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | c-harding |
| hostname | github.com |
| expected-hostname | github.com |
| None | 5f99f7c1d70f01da5b93e5ca90303359738944d8ab470e396496262c66e60b8d |
| turbo-cache-control | no-preview |
| go-import | github.com/angular/angular git https://github.com/angular/angular.git |
| octolytics-dimension-user_id | 139426 |
| octolytics-dimension-user_login | angular |
| octolytics-dimension-repository_id | 24195339 |
| octolytics-dimension-repository_nwo | angular/angular |
| octolytics-dimension-repository_public | true |
| octolytics-dimension-repository_is_fork | false |
| octolytics-dimension-repository_network_root_id | 24195339 |
| octolytics-dimension-repository_network_root_nwo | angular/angular |
| turbo-body-classes | logged-out env-production page-responsive |
| disable-turbo | false |
| browser-stats-url | https://api.github.com/_private/browser/stats |
| browser-errors-url | https://api.github.com/_private/browser/errors |
| release | 82560a55c6b2054555076f46e683151ee28a19bc |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width