Passing data to modal with a reactive form

I have a form that I want to use for both posting and editing data. I’m creating the modal using the service and passing the object that needs to be edited in the content.

I’m creating the from in the constructor, but at that time the data from the main component is not available in the modal component, nor is it available in the OnInit call.

Any ideas on how to make this work?

[dushkostanoeski]

OK, so misread the the docs, forget my last comment 😄

This is my parent component function call that creates the modal:

editNalog(id: number) {
    this.nalogModal = this.modalService.show(NalogModalComponent);
    this.nalogModal.content.nalog = this.model.nalozi.find(x => x.id === id);
    this.nalogModal.content.modalShown = true;
}

The constructor in the Modal component:

constructor(public bsModal: BsModalRef) {
    console.log(this.nalog);
}

And the OnInit function:

ngOnInit(): void {
   console.log(this.nalog);
   setTimeout(() => {
       console.log(this.nalog);
   },
   0);
}

In the console I have

undefined
undefined
{ id: 952 ...}

Got it to work thanks to your hack, but I wouldn’t close this issue yet because this should work as per the documentation.

[krooshua]

Hi, @dushkostanoeski I think, in your case, data not yet actually bound to bsModalRef. Try to wrap data binding with time out. It looks like a hack, but should work.

ngOnInit() {
	//Bind data from bsModalRef to component
	setTimeout(() => {
		if (this.bsModalRef.content && this.bsModalRef.content.someData) {
			this.someData = this.bsModalRef.content.someData;
		}
	}, 0);	
}