How to refresh parent component after modal component closes

Question

I have a component with a table that show rows from database. This component also has a "Add" button.

When I click on this button a modal appears with a form to add a new entry in the database.

I can save the row to the database, but I want to refresh the table in the parent component to show the new added entry.

The code I am using is:

in the parent component I open the modal with:

<div>
    <a href="#responsive-modal" data-toggle="modal" data-target="#responsive-modal" class="btn btn-md btn-add animated flipInX flipInY lightSpeedIn slideInUp" (click)="createAgentie(agentie2)"><i class="fa fa-plus"></i> Add</a>
    <createagentie></createagentie>
</div>

ts:

@ViewChild(CreateAgentieComponent) createAgentie: any = {};
    CreateAgentiee(agentie2: any = {}) {

        this.createAgentie.myObject = agentie2;

        this.createAgentie.open();


    }

in the child component:

<button type="button" (click)="submit()" class="btn btn-danger waves-effect waves-light" data-dismiss="modal">Save changes</button>

ts:

submit() {
        this.createagentieService.create(this.myObject)
            .subscribe(x => {
                console.log(x);
                this.myObject.denumire = "";
                this.router.navigate(['/vizualizareagentii']);

            });
    }

The problem is that this.router.navigate(['/vizualizareagentii']); which is the parent component's route does nothing. How can I go the parent component and refresh it?

Answer 1

I would open up the modal over the parent component and pass in a function for the child component which is the modal to pass back the new item after the creation happens, and then add it to the list of your Items. I'm going to give an ng-bootstrap guided example.

In the ParentComponent ts:

itemList : Item[] = [];

itemCreated(item: Item){
    itemList.push(item);
 }

In ParentComponent html:

<button type="button" (click)="modal.showModal();">Add Item</button>
<item-creator #modal (itemCreated)="itemCreated($event)"></item-creator>

In ItemCreator component's ts:

@Output() itemCreated= new EventEmitter<Item>();
@ViewChild('itemCreateMdl') itemCreateMdl: ElementRef;
item : Item = new Item(); //make the form build out this item
constructor(private myService : Service, private modalService: NgbModal){}

showModal(){
   this.modalService.open(this.itemCreateMdl);
}

buttonPressedSaveItem(){
   this.myService.createTheThing(this.item).subscribe(returnedItem => {
     this.itemCreated.emit(returnedItem);//assuming you already unwrapped it from the json
   }
}

The ItemCreate html which is a a ng-bootstrap modal:

<ng-template #itemCreateMdl let-c="close" let-d="dismiss">
//add in the typical bootstrap modal-header and modal-body stuff
<div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="buttonPressedSaveItem();c('Close click');">Add</button>
    </div>
</ng-template>