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?

Best practice would be to have dynamic generated DOM for the table, and to simply update the parent component's variable to include the new item. This is actually a very broad component interaction question, and there are several ways to achieve it. The general idea is you need your parent component to watch for an event, and have either the createagentieService or childcomponent to emit an event to let it know to update. — Z. Bagley
I am new to Angular development. Could you please give an example on how this might be achieved? — M. Niculescu

Kevin Kevin · Accepted Answer · 2017-08-29T16:00:26

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>

How to refresh parent component after modal component closes

1 Answers