How can I show content in a template of a NgbModalRef component in an angular module-federated...

I have an angular application that uses module federation. My remote application has the ng-bootstrap library shared with it and it is able to inject NgbModal to open another component as a modal - that is, an instance of NgbModalRef. The problem is that when I set the content on this modal by accessing the componentInstance property, the property gets set, but the content does not render in the NgbModalRef's template. If I change the calling component to call a function on the componentInstance, I can console.log the items value in said function and see that it does indeed have a value that should render, but I cannot get the value to render in the template.

Calling Component (this.modalService is the inject NgbModal instance):

createOrder(): void {
const modal = this.modalService.open(CreateOrderModalComponent, { this.config.modalOptions, animation: false });
const items$ = this.store.select(fromStore.selectAutoStartItems);

items$.pipe(takeUntil(this.unsubscribe$)).subscribe(items => {
modal.componentInstance.items = items;
});

// other code....


ModalComponent (NgbModalRef):

@Component({
standalone: true,
imports: [CommonModule, NgbModule],
selector: 'app-create-order-modal',
templateUrl: './create-order-modal.component.html',
styleUrls: ['./create-order-modal.component.scss'],
})
export class CreateOrderModalComponent {
items?: AutoStartItem[];

constructor(public modal: NgbActiveModal) { }
}

Continue reading...