Modal component data binding pattern is impractical

Bug description:

The pattern used to pass data to modal components is impractical and I think it could be enhanced to avoid common mistakes.

As described in the docs, you can pass data to your modal as follows:

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

This works fine, but has two problems:

1. It causes an ExpressionChangedAfterItHasBeenCheckedError error when the template uses name in structural directives like *ngIf, *ngFor etc.

   Workaround:

Inject public cdref: ChangeDetectorRef in your modal component constructor and doing:

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';
modalRef.componentInstance.cdref.detectChanges();

1. With this pattern, the modal component’s lifecycle hooks are executed before the binding is done. In other words, ngOnInit is executed before 'World' is binded to property name of modalRef.

Workaround:

Ignore lifecycle hooks and define a custom method bindData(data: any) as follows:

export class NgbdModalContent implements OnInit {
    @Input() name;

    constructor(
        public activeModal: NgbActiveModal,
        public cdref: ChangeDetectorRef,
    ) {

    }

    bindData(data: { name?: any }): void {
        // Bind your data here
        this.name = data.name;
        // Force change detection to avoid ExpressionChangedAfterItHasBeenCheckedError
        this.cdref.detectChanges();

        /*
         * Here you can put your logic
         * Your logic must be placed AFTER triggering change detection, otherwise
         * directives and components will not be updated correctly.
         */
    }

    ngOnInit(): void {
        // This callback is not really useful as it is executed before bindings are applied
    }
}

then just bind the data like so:

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

Be aware that this will work only in the order I mentioned:

1. Bind the data
2. Trigger change detection
3. Execute your own logic

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 6.0.6

ng-bootstrap: 3.0.0

Bootstrap: 4.1.1

[marcinmajkowski]

I agree using componentInstance this way has many pitfalls and I do not encourage it in codebases I work on.

This is how I work around this:

export class MyModalData {
  constructor(readonly name: string) {}
}

@Component(/* */)
export class MyModalComponent implements OnInit {
  constructor(private modalData: MyModalData) {}
  
  ngOnInit(): void {
    // can access this.modalData here
  }
}

this.ngbModal.open(MyModalComponent, {
  injector: Injector.create({
    providers: [{ provide: MyModalData, useValue: new MyModalData('foo') }],
  }),
});

This way passed data is typed, there is no outside component instance modifications and init lifecycle hook can be used for initialization as expected. Forgetting to provide the data results with error which is a nice touch.

Additionaly, in some cases using opening component injector as parent when creating modal component injector may be useful.

[dKab]

It’s also worth mentioning that ngOnChanges doesn’t get called at all.