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.

score 0 · Accepted Answer · answered Jun 01 '16 at 21:06

0

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.

answered Jun 01 '16 at 21:06

Thierry Templier

198,364
44
396
360

Thanks Thierry, I'd tried this but was getting a red squiggly underline in Visual Studio code saying `Property 'contextTitle' does not exist on type 'ContentComponent'` but I notice if I declare `contextTitle` as an empty variable outside of the `contextPanelSelected` function then it works fine. Perhaps this was just a tooling red-herring. – Dan Jun 01 '16 at 21:13
1

You're welcome! It's because TypeScript expects that you define the property before using it. Something like this: `contextTitle:string;`. – Thierry Templier Jun 01 '16 at 21:14

Use property from output binding in parent component

1 Answers1