CODEWITHSUNDEEP
angularjsmodal-dialogpage-refresh
Sylvester Naveen
Sylvester Naveen

Reputation: 9

Refreshing parent's component list when closing the modal dialog

I have an add button in a component named AddPerson which displays a modal dialog when user clicks. The list of persons are shown in list in PersonList component. Both AddPerson and PersonList components are called in ManagePersons component, so when dialog box closes in AddPerson component, Person list should be refreshed.

I am using angular 6.

PersonList:

<table class="table table-striped" *ngIf="persons && persons.length > 0">
    <thead>
    <tr>
        <th class="col-md-1">Name</th>
        <th class="col-md-1">Age</th></tr>
    </thead>
    <tbody>
    <tr *ngFor="let mp of persons">
        <td class="col-md-2">
        </td>
        <td class="col-md-1">
            {{mp.Name}}
        </td>
        <td class="col-md-1">
            {{mp.Age}}
        </td>
      </tr>
    </tbody>
</table>

AddPerson:

<button (click)="showModal()"
    class="btn-primary">Add</button>
<div class="modal" id="add-person" style="display: none">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" aria-label="Close" data- 
dismiss="modal">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Add</h4>
        </div>
        <div class="modal-body">
            <div class="row">
                <label class="col-md-2 text-right">Person Name
                </label>
                <div class="col-md-4">
                    <input [ngModel]="personName" type="number" 
    class="form-control" (ngModelChange)="personName = $event" />
                </div>
                <label class="col-md-2 text-right">Person Age
                </label>
                <div class="col-md-4">
                    <input [ngModel]="personAge" type="number" 
    class="form-control" (ngModelChange)="personAge = $event" />
                </div>
            </div>
         </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data- 
    dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" 
    (click)="onAdd()">Save Person</button>
        </div>
    </div>
</div>
</div>

ManagerPerson:

 <div class="panel-body">
    <app-add-person>
    </app-add-person>
    <app-peron-list>
    </app-peron-list>
</div>

Upvotes: 1

Views: 1618

Answers (1)

Mukul_Vashistha
Mukul_Vashistha

Reputation: 106

Try to call the parent component before closing the child modal and update the parent component with the required info:

import { Output, EventEmitter } from '@angular/core'; 


class ChildComponent {
  @Output() someEvent = new EventEmitter<string>();

  callParent() {
    this.someEvent.next('something');
  }
}

Upvotes: 1

Related Questions