GeezerVison is showing github.com — There is no way to access inputs or outputs of Components created by NgComponentOutlet · Issue #15360 · angular/angular
There is no way to access inputs or outputs of Components created by NgComponentOutlet #15360DescriptionI'm submitting a ... (check one with "x")
[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
There is no way to set @inputs or subscribe to @output events of the Component created by NgComponentOutlet.
Expected behavior
I expect some to set values and to subscribe events.
What is the motivation / use case for changing the behavior?
At least, we should have the same level of functionality as ViewContainerRef.createComponent() which is roughly the programatic equivalent of NgComponentOutlet. That function returns a ComponentRef<any> which provides an instance property that allows direct access to the class instance of the Component. The original feature request for NgComponentOutlet defined an event on the directive that would fire and pass this ComponentRef object after creation. This did not make it into the current implementation and I see no other alternatives to access inputs/outputs.
Supporting only Components with no inputs or outputs severely limits the usefulness of NgComponentOutlet.
- Angular version: 4.0.0-rc.1
Reacted by TheILPlace, Mateo Tibaquirá, Younes Jaaidi, Marek Buko, Rodolfo Nogueira, Yuriy Grunin, Dino Bettini, Jonathan Gelin, Meligy, Eticom Ltd and 136 more Reacted by Paul Lunt, Ori Shalom, gentoo90, 1van0v, Pablo Maurer, David Silva, marsc and Marin Muštra ActivityDzmitryShylovich commented on Mar 21, 2017 We can add events like created/destroyed similar to the router's activated/deactivated. It won't work with * syntax (#12121) but I think it's still better than nothing. Reacted by Mike Weiss and Miloš Lapiš matheo commented on Mar 28, 2017 Then there's no way to get the ComponentRef instance?
ngComponentOutlet will be limited then to dumb components, still cool hehe
Thanks for the great work! DzmitryShylovich commented on Mar 28, 2017 @matheo why do you need a ComponentRef? matheo commented on Mar 29, 2017 Following the Dynamic Component Loader documentation, I would like to use the ComponentRef instance to pass input variables to my dynamic components, as they do there:
(<AdComponent>componentRef.instance).data = adItem.data;
Reacted by Ctibor Laky, Naga Babu, Mitja O., Sateesh Kumar, Rodolfo Nogueira, Jason K., Darius Juodokas, Code Scratcher, Pablo Maurer and Marlon Eduardo Peña Llanos DzmitryShylovich commented on Mar 29, 2017 Reacted by Alexey Zuev, Max Hamulyák, gms1, Mauricio Jorge Cordeiro Garrido, Ctibor Laky, Void and Darius Juodokas Reacted by Mateo Tibaquirá, Rodolfo Nogueira, Dino Bettini and Ctibor Laky matheo commented on Mar 29, 2017 kaylumah commented on Mar 30, 2017 When would this feature be ready for release, could really use something like this :) DzmitryShylovich commented on Mar 30, 2017 If you need this feature asap you can copy paste the directive implementation until it will be merged. Reacted by Max Hamulyák, zhaojunjie163, Dino Bettini and Pablo Maurer Reacted by zhaojunjie163 alsoLut commented on Apr 2, 2017 a temporary solution is to pass the data via a simple rxjs observable yjaaidi commented on Apr 5, 2017 Hi!
I think we really need a way to control "inputs" and "outputs". Otherwise, if we grab the reference to the component, it will just get hacky:
- You'll have to reset the inputs manually instead of letting the change detector do that for you.
- It will get complicated as soon as you'll have multiple dynamic components like in an "ngFor" with maybe different types of components. It will soon need more code than native JS.
mlc-mlapis commented on Apr 5, 2017 But it is the same situation as in the case of dynamically created component instances, right? vicb commented on Apr 6, 2017 broodjetom commented on Jun 6, 2017 So someone found a way to have @Output() in a dynamically loaded component with ngComponentOutlet. Can someone please give an example on how to have an simple variable passed to the component? I was trying it with provider, since the documentation says to do it that way, but this doesn't seem to work, another issue already adresses this, that how I got here. This is what I have right now.
<ng-container *ngComponentOutlet="getComponent(item.tag); providers: "myProvider"></ng-container>
This is inside a *ngFor, where every item has a tag which will be factored to a component which is loaded in the container. But I need data inside that container. It is only one object that I need to send, but I don't know how to. myProvider is an object with two properties: nothing special. jpike88 commented on Jan 15, 2025 I need to get at the component instance because right now I'm using ng-dynamic-component for getting at outputs, which I'm then send functions back into the parent in order to call them. The problem is that they may have lost context if they use this in them.
I see in this ticket there's a request for exposing outputs, but I'd like to ask that the component instance itself is exposed as well. The workaround I'm doing is sending the instance itself back through an output, which works but is a dirty workaround as I have to explicitly set 'this' in a bunch of places to ensure it works correctly. jpike88 commented on Aug 13, 2025 Hello, I saw recently that
#56320
#56239
just got closed, is there any plan to finalize this? jpike88 commented on Aug 13, 2025 Just found #63101, never mind. Thanks guys added 9 commits that reference this issue on Aug 22, 2025This issue will close once commit 4f21740 is merged into the 'main' branch.4f21740 This issue will close once commit cca2b85 is merged into the 'main' branch.cca2b85 This issue will close once commit ef4d58b is merged into the 'main' branch.ef4d58b This issue will close once commit 7ed83f8 is merged into the 'main' branch.7ed83f8 This issue will close once commit 7cbf6f6 is merged into the 'main' branch.7cbf6f6 This issue will close once commit 7977558 is merged into the 'main' branch.7977558 This issue will close once commit d58d7ae is merged into the 'main' branch.d58d7ae This issue will close once commit 814bd50 is merged into the 'main' branch.814bd50 This issue will close once commit eef384e is merged into the 'main' branch.eef384e
MetadataMetadataDevelopmentNo branches or pull requestsIssue actions
|