Title: Add option to specify view providers when dynamically creating components · Issue #48228 · angular/angular · GitHub
Open Graph Title: Add option to specify view providers when dynamically creating components · Issue #48228 · angular/angular
X Title: Add option to specify view providers when dynamically creating components · Issue #48228 · angular/angular
Description: Which @angular/* package(s) are relevant/related to the feature request? core Description Let's say our component has a child directive with dependency decorated by @Host. And we want to specify its provider. You can do that in the compi...
Open Graph Description: Which @angular/* package(s) are relevant/related to the feature request? core Description Let's say our component has a child directive with dependency decorated by @Host. And we want to specify it...
X Description: Which @angular/* package(s) are relevant/related to the feature request? core Description Let's say our component has a child directive with dependency decorated by @Host. And we want to specif...
Opengraph URL: https://github.com/angular/angular/issues/48228
X: @github
Domain: patch-diff.githubusercontent.com
{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Add option to specify view providers when dynamically creating components","articleBody":"### Which @angular/* package(s) are relevant/related to the feature request?\r\n\r\ncore\r\n\r\n### Description\r\n\r\nLet's say our component has a child directive with dependency decorated by `@Host`. And we want to specify its provider.\r\n\r\nYou can do that in the compile time using `viewProviders` option in `@Component` decorator. But, currently, there is no way to do it programmatically.\r\n\r\ni.e. when that component is created dynamically by `ViewContainerRef.createComponent()` method, you can only specify providers using `injector` option in `Injector.create()` method. But those providers will not be applied to that directive.\r\n\r\nHere is [live example](https://stackblitz.com/edit/angular-ivy-eygesl?file=src/app/app.component.ts). Take a closer look at providers and console output.\r\n\r\nWhen `providers` array is used, factory is not called because search stops on `\u003cinput\u003e` component (ngModel uses `@Host` and `@Optional` decorators): \r\n```ts\r\n@Component({\r\n selector: 'app-provider-form',\r\n template: '\u003cinput name=\"username\" [(ngModel)]=\"username\" /\u003e',\r\n providers: [{provide: ControlContainer, useFactory: () =\u003e {console.log('provider factory')}}],\r\n})\r\nexport class ProviderestFormComponent {\r\n username: string;\r\n}\r\n```\r\n\r\nBut when `viewProviders` array is used factory is called:\r\n```ts\r\n@Component({\r\n selector: 'app-view-provider-form',\r\n template: '\u003cinput name=\"username\" [(ngModel)]=\"username\" /\u003e',\r\n viewProviders: [{provide: ControlContainer, useFactory: () =\u003e {console.log('view provider factory')}}],\r\n})\r\nexport class ViewProviderFormComponent {\r\n username: string;\r\n}\r\n```\r\n\r\nSo it would be really convenient to be able to specify this when form is created dynamically. Otherwise there is no easy way to bind parent ngForm directive and child ngModels.\r\n\r\nRelated issues: https://github.com/angular/angular/issues/47580 , https://github.com/angular/angular/issues/34780\r\n\r\n### Proposed solution\r\n\r\nAdd `viewInjector` option to ViewContainerRef.createComponent() options. Or maybe add `viewProviders` key to `Injector.create()`.\r\n\r\n### Alternatives considered\r\n\r\nn/a","author":{"url":"https://github.com/zmajciki","@type":"Person","name":"zmajciki"},"datePublished":"2022-11-24T21:02:18.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1},"url":"https://github.com/48228/angular/issues/48228"}
| 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:e68d21c9-98f1-2a21-eb74-5e9124dd552f |
| current-catalog-service-hash | 81bb79d38c15960b92d99bca9288a9108c7a47b18f2423d0f6438c5b7bcd2114 |
| request-id | A9EC:3EEA8F:347D70B:43F2E99:6974C807 |
| html-safe-nonce | df5cd540ae48840e8e9b6239a384b4d885aa3b67d6445c6bbe7af532d660cbd9 |
| visitor-payload | eyJyZWZlcnJlciI6IiIsInJlcXVlc3RfaWQiOiJBOUVDOjNFRUE4RjozNDdENzBCOjQzRjJFOTk6Njk3NEM4MDciLCJ2aXNpdG9yX2lkIjoiNDU4NTA1OTc2MTI4NzEyMDkwMyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9 |
| visitor-hmac | 09085a4991ff0710758278c7889f43538024f9a10782700481ed362e6f2cfb0d |
| hovercard-subject-tag | issue:1463806386 |
| 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/48228/issue_layout |
| twitter:image | https://opengraph.githubassets.com/bf483583256c05e4854a2c5faf0a789735d8658ddb7d4ee10f551559c50f8f8f/angular/angular/issues/48228 |
| twitter:card | summary_large_image |
| og:image | https://opengraph.githubassets.com/bf483583256c05e4854a2c5faf0a789735d8658ddb7d4ee10f551559c50f8f8f/angular/angular/issues/48228 |
| og:image:alt | Which @angular/* package(s) are relevant/related to the feature request? core Description Let's say our component has a child directive with dependency decorated by @Host. And we want to specify it... |
| og:image:width | 1200 |
| og:image:height | 600 |
| og:site_name | GitHub |
| og:type | object |
| og:author:username | zmajciki |
| hostname | github.com |
| expected-hostname | github.com |
| None | 4a4bf5f4e28041a9d2e5c107d7d20b78b4294ba261cab243b28167c16a623a1f |
| 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 | 488b30e96dfd057fbbe44c6665ccbc030b729dde |
| ui-target | full |
| theme-color | #1e2327 |
| color-scheme | light dark |
Links:
Viewport: width=device-width