Allow injecting ComponentRef of a component through DI
See original GitHub issueWhich @angular/* package(s) are relevant/related to the feature request?
core
Description
As of angular 14 we have the new super useful setInput
on ComponentRef
for dynamic components. It finally allows fully CD aware dynamic inputs changing.
Currently if I want to extend a component with a directive and set inputs from it I need to do one of the two options:
- Change the inputs statically in the constructor
- Change inputs to get/set as
ngOnChanges
won’t fire
Proposed solution
Allowing to inject ComponentRef
of the host component instead of the actual instance. This way we could just use setInput
to update inputs and have a full CD aware binding support not through the template.
Alternatives considered
- Change the inputs statically in the constructor only - Can’t apply to directive input based changes or observable based changes
- Change inputs to get/set - Possible but annoying and “leaks” the knowledge of this component is being used from a directive outside. How can one explain why
ngOnChanges
was not used… - Maybe not through
ComponentRef
but as any other way to usesetInput
from DI injected components
Issue Analytics
- State:
- Created a year ago
- Reactions:13
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Angular - Dynamically inject a component in another component
Here is the way I could make it work -. Tab.component.ts. Changed "tabs" from TabContainerComponent array to QueryList. import { Component ...
Read more >Understanding dependency injection - Angular
DI is wired into the Angular framework and allows classes with Angular decorators, such as Components, Directives, Pipes, and Injectables, to configure ...
Read more >Inject Objects into your Components with Angular ...
Objects don't have class names, and to inject an object we have to first create a DI Token for it. Inject the Storage...
Read more >di-container-js - npm
A factory allows to create multiple instances of a class and inject dependencies to them. A factory itself is not registered in DI...
Read more >Angular Dynamic Components: Building a Dialog System
We are passing in the injector we requested in the constructor. This enables the dynamic component to make use of dependency injection itself....
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@pkozlowski-opensource sure. I had not a while ago a third party component with several inputs. We set all of them to the same values in most of the app. Now the idea I had is adding a directive that sets those inputs. The component is using ngOnChanges and not input get set so I got stuck. If I had a way to inject the component ref and call set input - the ngOnChanges would have been invoked.
I agree, @Harpush.
@pkozlowski-opensource, this would make a lot of third-party integration szenarios easier. It would not make the learning-process for Angular beginnners harder, but would support advanced use-cases if needed.
As mentioned, IMHO it would fit well into the
setInput
API.