You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
NgbOffcanvasRef and NgbModalRef should expose a ComponentRef when using a component type as content.
Currently the NgbOffcanvasRef exposes a componentInstance. This makes it hard to use components with Signal inputs, as you cannot do myComponentInstance.myProp = value. Instead, the proper way is to use the function setInput on a componentRef. setInput also triggers change detection and ngOnChanges correctly.
Link to minimally-working StackBlitz that reproduces the issue:
I agree that it's not clean setting inputs programmatically on the modal component. OTOH, I've always wondered why the examples in the documentation decorate the properties set by the opening component with @Input(). They're not inputs and have no reason to be.
I generally expose an initialize() method in the modal component that the opening component calls once the component has been created by the modal service.
In your stackblitz, you could replace the inputs by regular writable signals.
Sure, that works in this example. I'm trying to share the content components and do things like opening a popover on desktop and offcanvas on mobile. or modal/offcanvas
I have the same problem. I hacked it for now. Hopefully the componentRef will be exposed soon so I can clean this up.
/** * TODO: This is a hack to get the ComponentRef because NgbModalRef does not expose it. * See https://github.com/ng-bootstrap/ng-bootstrap/issues/4688 */ const componentRef: ComponentRef<C> = ref['_contentRef'].componentRef; componentRef.setInput('data', data);
Bug description:
NgbOffcanvasRef and NgbModalRef should expose a ComponentRef when using a component type as content.
Currently the NgbOffcanvasRef exposes a componentInstance. This makes it hard to use components with Signal inputs, as you cannot do myComponentInstance.myProp = value. Instead, the proper way is to use the function setInput on a componentRef. setInput also triggers change detection and ngOnChanges correctly.
Link to minimally-working StackBlitz that reproduces the issue:
https://stackblitz.com/edit/angular-5zsark-l3yj9i
Versions of Angular, ng-bootstrap and Bootstrap:
Angular: 17.3.1
ng-bootstrap: 16.0.0
Bootstrap: 5.3.3
The text was updated successfully, but these errors were encountered: