Ngx-bootstrap: Passing data to modal with a reactive form

[dushkostanoeski]

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?

[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);  
}

[dushkostanoeski]

My bad, I had the modal module imported with a forRoot() call :) it all binds as it should

[dushkostanoeski]

OK, so misread the the docs, forget my last comment :D

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]

@dushkostanoeski well then you should create a service to hold data that you want to pass to modal

Take a note, that you need to set data before modalService.show()
parent component

editNalog(id: number) {
    this._modalService.setModalData(data)
    this.nalogModal = this.modalService.show(NalogModalComponent);
}

modal component

ngOnInit(): void {
    this.data = this._modalService.getData()
}

Service can hold data as Observable or a simple object, all up to you :)

[VitorHFLopes]

@krooshua when I look at documentation of modals, this service.setModalData() doesn't exist, only .show()and .checkScrollbar. How did you get this approach?

[krooshua]

@VitorHFLopes, it should be you custom service :)

As example

import { Injectable } from '@angular/core';

@Injectable()
export class ModalDataService {
    private data;
    constructor() {}

    setData(data) {
        this.data = data
    }
    getData() {
        return this.data
    }
}

Or via Observable/Subject, depends on what you need

[MostafaAbdlrazek]

i had a similar issue and i solved it by warping the modal inside a div and add *ngIf="yourObject" attribute to it and it worked like a charm.

[IlyaSurmay]

Closing as a duplicate of #2530. Fix already exists but it's not merged yet.

[thebarefootdev]

This issue remains, the solutions given above are not correct, I hope the documentation is updated soon, its own examples do not work.

[anjanasilva]

@krooshua Without your setTimeout hack this seems to be still a pending issue . Thanks for the hack.