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 => {
     modalponentInstance.items = items;
   });

// other code....

ModalComponent (NgbModalRef):

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

  constructor(public modal: NgbActiveModal) { }
}

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) { }
}

• angular
• ng-bootstrap
• angular-module-federation
• ng-bootstrap-modal

1 Answer 1

This ended up being a problem with change detection. Once I set up a way to force change detection in the modal component, I was able to see the desired result. I have to call the detectChanges function in the modal component from the component where I am opening the modal by accessing the componentInstance property. This feels a little hacky to me, so if anyone has a better solution, I would appreciate your input.

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

  constructor(public modal: NgbActiveModal, private changeDetector: ChangeDetectorRef) { }

  detectChanges(): void {
    this.changeDetector.detectChanges();
  }
}