The refreshTable() function is in the parent component. I need to trigger it whenever I updated information in my modal and closes it.
I am using @ng-bootstrap for my modal
For may parent.component.ts
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; constructor( private ngbModal: NgbModal, ) viewModal() { const openModal = this.ngbModal.open(ModalComponent); openModal .componentInstance.id = row.id; } refreshTable() { //refresh code block here }
For my modal.component.ts
import { NgbActiveModal} from '@ng-bootstrap/ng-bootstrap'; constructor( private activeModal: NgbActiveModal, ) updateParent() { //update data to database code here this.activeModal.close(); }
How to trigger refreshTable() from ModalComponent after closing the modal? Since there are changes in the data from database, data from parent is not updated accordingly when modal is closed.
Try to change to this
const openModal = this.ngbModal.open(ModalComponent);
openModal.componentInstance.id = row.id;
openModal.dismissed.subscribe(
_ => {
this.refreshTable();
}
)
in parent.component.ts
Pass it from the parent component to the child component as a prop.
Use bind or an arrow function to preserve the this value.
Add an output event to your modal component
@Output() onCLose: EventEmitter<any> = new EventEmitter();
When the user clicks close just call the emit() method
this.onCLose.emit(value); //value can be whatever you want to pass to the parent
Update your viewModal method in the parent to include a subscription to the close event
viewModal() {
const openModal = this.ngbModal.open(ModalComponent);
openModal.componentInstance.id = row.id;
openModal.componentInstance.onClose.subscribe(value =>
// handle the close event
this.refreshTable();
})
}
You could also do it any other way communication between components can be achieved: