How to call parent method Angular 2 with returning value?

Question

I have two methods in parent component:

public isOpen(index: number): boolean {
    const block = this.dropDownBlocks.find(b => b.index === index);
    return block.open;
  }

  public openDropDown(index: number) {
    const block = this.dropDownBlocks.find(b => b.index === index);
    const i = this.dropDownBlocks.indexOf(block);
    this.dropDownBlocks[i].open = !block.open;
  }

No matter what the do.

In child component I determined:

@Output() openTab = new EventEmitter<number>();
@Output() opened = new EventEmitter<number>();

And below in child component I have written:

public openDropDown(index: number) {
   this.openTab.emit(index);
}

public isOpen(index: number) {
   return this.opened.emit(index);
}

Template child is:

<div class="header" (click)="openDropDown(2)"></div>
<div class="body" [hidden]="!isOpen(2)">

It means I invoke child method and transfer the initiative to parent method with the same name:

public openDropDown(index: number) {
       this.openTab.emit(index);
    }

So, child component is included in parent like this:

<app-missed-plan (openTab)="openDropDown($event)" (opened)="isOpen($event)"></app-missed-plan>

Problem is isOpen() does not work and does not return value

Answer 1

I used a callback function in my implementation. The child component passes a value and callback to the parent, the parent does work with the value and returns the result of that work to the child component using the callback.

Child component:

@Output() opened = new EventEmitter<{ value: number, onResult: Function }>()

public isOpen(index) {
    this.opened.emit({
        value: index,
        onResult: (result) => doSomethingWithResult
    })
}

Parent template:

<app-parent 
     (opened)="doSomething($event.value, $event.onResult)">
</app-parent>

Parent component:

public doSomething(index, onResult) {
    returnValue = doStuffWithIndex
    onResult(returnValue)
}