Angular 6 - Child (Inner) Component emit an EventEmitter and wait to Parent Component return a respond

Question

I have this component as a Parent component (facility.component), and I embedded a child/inner component (editableTable.component) inside this parent component, something like this

facility.component

  <editable-table 
  [dataList]="nursingUnitList" 
  (dataListUpdater)="updateNursingUnitList($event)">
  <editable-table>

facility.ts (call a service and get all data from a NursingUnit table)

 updateNursingUnitList(getUpdate: boolean) {
    if (getUpdate == true) {
      this.nursingUnitService.getAllUnits().subscribe(
        (data: nursingUnit[]) => {
          this.nursingUnitList = data;
        }
      )

And in chile/inner component I have this,

editableTable.ts (by click on Refresh button, getting latest/refreshed item list from NursingUnit table)

export class EditableTableComponent implements OnInit {

@Input() dataList: any[];
@Output() dataListUpdater = new EventEmitter<boolean>();

refresh() {

this.dataListUpdater.emit(true);

if (this.dataList.length != 0) {
// After getting updated/refreshed list do something here
// but I just got the dataList is null as the compiler not wait for emitter to get the updated/refreshed list from the parent component
    }

}

My question is how can I wait at the emit point to get the updated list, something like subscribe services in angular or async await in C#.

Thank you for anything you can do to help!

score 2 · Accepted Answer · answered Jun 12 '19 at 17:06

You might want to look at the OnChanges lifecycle hook.

export class EditableTableComponent implements OnInit, OnChanges {

  @Input() dataList: any[];
  @Output() dataListUpdater = new EventEmitter<boolean>();

  ngOnChanges(change: SimpleChanges) {
    if(change.dataList) {
      // do something
    }
  }

}

score 1 · Answer 2 · answered Jun 12 '19 at 17:13

In child component (editableTable.ts) you can implement an OnChanges hook and it will look something like this:

ngOnChanges(changes: SimpleChanges): void {
  const { dataList } = changes;
  if (dataList && dataList.previousValue !== dataList.currentValue) {
    'here call method which will handle dataList as you wish, because at this
     moment your dataList is updated from parent component. But don't call
     refresh() method because it will again emit Output from child component
     so you need to move code which handle dataList in a separate method.'
  }
}

Angular 6 - Child (Inner) Component emit an EventEmitter and wait to Parent Component return a respond

2 Answers2