Feature request: expose componentRef in NgbModalRef

[mjeanroy]

Bug description:

When using NgbModal, we can access the componentInstance from the NgbModalRef instance.

Since the introduction of the new setInput method in Angular, I think it could be interesting to expose the componentRef as well.

For example, in the NgbModal documentation, we can see this example:

import { Component, inject, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-modal-content',
	standalone: true,
	template: `
		<div class="modal-header">
			<h4 class="modal-title">Hi there!</h4>
			<button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
		</div>
		<div class="modal-body">
			<p>Hello, {{ name }}!</p>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
		</div>
	`,
})
export class NgbdModalContent {
	activeModal = inject(NgbActiveModal);

	@Input() name: string;
}

@Component({
	selector: 'ngbd-modal-component',
	standalone: true,
	templateUrl: './modal-component.html',
})
export class NgbdModalComponent {
	private modalService = inject(NgbModal);

	open() {
		const modalRef = this.modalService.open(NgbdModalContent);
		modalRef.componentInstance.name = 'World';
	}
}

The problem with this example is that when we set the name input on the component instance, it does not trigger any change detection.

It's not a big issue with this trivial example, as the change detection will be triggered anyway, but it also means setting the name input like this cannot use the @Input transform function and it would had to be done manually.

What I'm suggesting is using the setInput method by exposing the componentRef.

Here is what it could look like:

import { Component, inject, Input } from '@angular/core';
import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
	selector: 'ngbd-modal-content',
	standalone: true,
	template: `
		<div class="modal-header">
			<h4 class="modal-title">Hi there!</h4>
			<button type="button" class="btn-close" aria-label="Close" (click)="activeModal.dismiss('Cross click')"></button>
		</div>
		<div class="modal-body">
			<p>Hello, {{ name }}!</p>
		</div>
		<div class="modal-footer">
			<button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
		</div>
	`,
})
export class NgbdModalContent {
	activeModal = inject(NgbActiveModal);

	@Input() name: string;
}

@Component({
	selector: 'ngbd-modal-component',
	standalone: true,
	templateUrl: './modal-component.html',
})
export class NgbdModalComponent {
	private modalService = inject(NgbModal);

	open() {
		const modalRef = this.modalService.open(NgbdModalContent);
-		modalRef.componentInstance.name = 'World';
+		modalRef.componentRef.setInput('name', 'World');
	}
}

Let me know what you think: the change seems small, I can work on a PR if it has some interests.

Link to minimally-working StackBlitz that reproduces the issue:

Not an issue per se, more a feature request :)

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: N/A

ng-bootstrap: ^16.0.0

Bootstrap: N/A

[KimBum]

I came here, because of using signal inputs. At least in their current form those inputs are simply not updateable via the normal component class instance. They are not pure signals, so set is not available.

setInput is the only way to update a signal input and without the availability of componentRef, setInput cannot be used.

So for anyone starting to use signal inputs or in the future maybe starting projects only with signal inputs, the modals would not allow input updates.

Hoping this feature makes it through, maybe even without breaking changes 🙏