Angular(8) NgbModal DB insert and same data will refresh on parent page component

Question

In my Angular (8) using NgbModal. parent page, one of component getting the data from http service (java and mysql db) as list. and on submit of modal, it will insert a record in same table of mysql db. now after Modal submit and dismiss, how to refresh/update the component list data with new data.

Parent Component -> opening the modal component

"selectedName" fetch from DB and displaying in parent component.

 openEditProfilePage() {
    const modalRef = this.modalService.open(EditProfileComponent, { size: 'xl', scrollable: true });
    modalRef.componentInstance.selectedName = this.selectedName;

  }

Child component get value of selectedName from parent, and in a form update to apend some string and save.

 onSave(form: FormGroup) {

    if (form.valid) {

      this.nameService.editName(form.value).subscribe(
        res => {
          this.modalService.dismissAll();
        },
        error => {
          this.showError(error);
        }
      );
    }
  }

Now in child it will update the name in DB.so after dismissAll, modal/popup will be closed, and same time want to display the updated name, in parent component.

manos_ch manos_ch · Accepted Answer · 2020-03-02T12:12:22

By looking at the docs, it seems that you need to use the result promise provided by the NgbModalRef (https://ng-bootstrap.github.io/#/components/modal/api#NgbModalRef). The promise gets resolved(or rejected) when the modal closes, therefore you will be able to load the new list at that point. For Example: In your parent page component.ts

constructor(private modalService: NgbModal) {}
open(content) {
    this.modalService.open(content).result.then((result) => {
        //call the method of refreshing your list here
    }, (reason) => {
        //called if the modal was dismissed for some reason
    });
  }

In your modal component html

<div class="modal-footer">
    <!-- modal.close will cause the result promise to get resolved therefore executing the block of code that will refresh the items list -->
    <button type="button"(click)="onClose()">Save</button>
  </div>

In your modal component ts you will have to inject the service inside the component of the modal in order to use the method you want

export class ModalComponent{
  constructor(private myHttpService: MyHttpService)\

  onClose(){
     this.myHttpService.methodToRefreshList()
     // close modal
  }

}

Angular(8) NgbModal DB insert and same data will refresh on parent page component

1 Answers