question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow injecting ComponentRef of a component through DI

See original GitHub issue

Which @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:

  1. Change the inputs statically in the constructor
  2. 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

  1. Change the inputs statically in the constructor only - Can’t apply to directive input based changes or observable based changes
  2. 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…
  3. Maybe not through ComponentRef but as any other way to use setInput from DI injected components

Issue Analytics

  • State:open
  • Created a year ago
  • Reactions:13
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
Harpushcommented, Nov 30, 2022

@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.

0reactions
mikezkscommented, Dec 10, 2022

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found