Use property from output binding in parent component

Question

I'm sure I must be missing something simple here, but I have a child component which emits an object via an Output event. The parent component then subscribes to this output in a template like this:

<div class="tree-panel-container">
    <div class="tree-panel-content">
        <content-tree (contextSelected)="contextPanelSelected($event);"></content-tree>
    </div>
    <context-panel>
        <div class="context-panel">
            <h2>{{contextTitle}}</h2>
        </div>
    </context-panel>
</div>

Within the exported class of this same component is a function like this:

contextPanelSelected($event) {
    console.log($event);
}

The console.log in this function is correct, so I know the output object is coming through as expected. What I want to do though is use a property on this output object to populate the value of {{contextTitle}} in the template.

Can anyone suggest how to do this?

Many thanks.

Answer 1

You use the following:

contextPanelSelected(value) {
  console.log(value);
  this.contextTitle = value;
}

In the following code:

(contextSelected)="contextPanelSelected($event)"

$event corresponds to the data that is sent through the event contextSelected.emit('some text'). This value can be passed as parameter of the contextPanelSelected method. This method is then responsible of setting this parameter into the contextTitle property of the component.