gund
[Bug] @angular/cdk overlay output binding doesn't work (not an output)
Describe the bug
When trying to bind output through a component instanciated with @angular/cdk, the signal output isn't recognized.
Expected behavior
It would be nice if the new output signals would work as they do with normal outputs.
Reproduction
https://stackblitz.com/edit/stackblitz-starters-cwmkaoqj
The test.component.ts is shown both from the overlay from @angular/cdk and from main.ts.
When trying to use the output binding with signal directly from app it works as expected, when using the overlay however there is a console error saying: ERROR Error: Component myOutput2 is not an output!.
Environment:
- OS: [e.g. Linux Ubuntu 14.02] MacOS Sequioa 15.5
- Browser: [e.g. chrome, safari] Chrome Version 137.0.7151.68 (Official Build) (x86_64)
- Library version: [e.g. 10.5.1] 10.8.2
- Angular version: [e.g. 14.0.0] ^19.0.0 & ^20.0.0
Seems like an issue with CDK overlay/component portal to me. If it's working in normal context then there is nothing wrong with the library itself.
For whatever reason when your component is rendered in the overlay angular resolves ComponentIO service to a ClassicComponentIO instead of the SignalComponentIO, which is why it's not working with signal outputs.
Unfortunately I cannot find a reason why it's not seeing a correct service in this case, potentially something to do with how DI works in the overlay context, which I do not understand.
Sorry but you have to open an issue in the CDK repo instead to get help. You can link an upstream issue here if you open it there. I will keep it open until then.
Thank you for the quick reply, I've created an issue in @angular/cdk: https://github.com/angular/components/issues/31373
Hey @theoarav actually it is working if you provide the SignalComponentIoModule in the app root level, look at this stackblitz: https://stackblitz.com/edit/stackblitz-starters-dggy3kxm?file=src%2Fmain.ts
Now signal output works even in the overlay since the providers are correctly setup globally for the whole app.
TLDR
Just make sure you register SignalComponentIoModule in you app root like this:
bootstrapApplication(App, {
providers: [importProvidersFrom(SignalComponentIoModule)],
});